title: How to use two different forms on one page with Jquery, PHP and MySQL
body: <p>I have a PHP-page which displays a number of records. </p>
  
  <p>On the page I have two submit buttons: one for the next page and one (within a bootstrap modal) to export the data to another database.</p>
  
  <p>The HTML of the next page is:</p>
  
  <pre><code>&lt;form method="post" action="mypage.php" /&gt;
  Jump to Page:
  &lt;select name="page""&gt;
  &lt;option value="1" selected&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="submit" value="Go" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is a part of the code from within the (bootstrap) modal:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
  &lt;form data-async data-target="#modal" action="import.php" method="POST"&gt;
  &lt;div id="modal" class="alert alert-success" style="font-size:13px;"&gt;Please enter the requested data!&lt;/div&gt;
  &lt;div class="tabbable"&gt;
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a href="#pane1" data-toggle="tab" style="font-size:13px;"&gt;Project&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#pane2" data-toggle="tab" style="font-size:13px;"&gt;Summary&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#pane3" data-toggle="tab" style="font-size:13px;"&gt;Personal&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#pane4" data-toggle="tab" style="font-size:13px;"&gt;Details&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#pane5" data-toggle="tab" style="font-size:13px;"&gt;Notification&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content"&gt;
     &lt;div id="pane1" class="tab-pane active"&gt;
          &lt;input type="hidden" name="ticketId" id="ticketId" value=""/&gt;
      &lt;p&gt;Please select the project you want to file the report under.&lt;/p&gt;
  
         &lt;select style="width:350px;" class="chzn-select" name="project"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;option&gt;Project 1&lt;/option&gt;
              &lt;option selected&gt;Project 2&lt;/option&gt;
              &lt;option&gt;Project 3&lt;/option&gt;
              &lt;option&gt;Project 4&lt;/option&gt;
             &lt;/select&gt;
         &lt;p class="note"&gt;Note: You can change this later.&lt;/p&gt;
  
  
  [... content skipped ...]
  
  
    &lt;/div&gt;&lt;!-- /.tab-content --&gt;
  
  &lt;/div&gt;&lt;!-- /.tabbable --&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;input type="submit" class="btn btn-primary" value="Create Report" /&gt;
      &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And in the header of the modal window page I have this javascript:</p>
  
  <pre><code>&lt;script&gt;
  jQuery(function($) {
  $('body').on('submit','form[data-async]', function(event) {
          alert('submit Event');
          var $form = $(this);
          var $target = $($form.attr('data-target'));
          $.ajax({
              type: $form.attr('method'),
              url: $form.attr('action'),
              data: $form.serialize(),
  
              success: function(data, status) {
                  $target.html(data);
              }
          });
          event.preventDefault();
          $('#addBookDialog').delay(2000).fadeOut('slow');
          location.reload(true);
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>BTW the next page is called with simple PHP that queries the database for new records.</p>
  
  <p>The problem is this: when I click on the submit button within the modal the data gets exported to the other database using import.php. Great. But when I use the first button (next page, or another one) the request is also sent to import.php, while it just should display another page. </p>
  
  <p>So my question is: how can I use the Jquery function for exporting the info from the modal window and how can the first (page) submit button just call the next or other page.</p>
  
  <p>If you have any question, please let me know.</p>
  
  <p>Cheers!</p>