How to use two different forms on one page with Jquery, PHP and MySQL

[ALEXS]

I have a PHP-page which displays a number of records. 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.The HTML of the next page is:\[code\]<form method="post" action="mypage.php" />Jump to Page:<select name="page""><option value="http://stackoverflow.com/questions/15866950/1" selected>1</option><option value="http://stackoverflow.com/questions/15866950/2">2</option><option value="http://stackoverflow.com/questions/15866950/3">3</option></select><input type="submit" value="http://stackoverflow.com/questions/15866950/Go" /></form>\[/code\]This is a part of the code from within the (bootstrap) modal:\[code\]<div class="modal-body"><form data-async data-target="#modal" action="import.php" method="POST"><div id="modal" class="alert alert-success" style="font-size:13px;">Please enter the requested data!</div><div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="http://stackoverflow.com/questions/15866950/#pane1" data-toggle="tab" style="font-size:13px;">Project</a></li> <li><a href="http://stackoverflow.com/questions/15866950/#pane2" data-toggle="tab" style="font-size:13px;">Summary</a></li> <li><a href="http://stackoverflow.com/questions/15866950/#pane3" data-toggle="tab" style="font-size:13px;">Personal</a></li> <li><a href="http://stackoverflow.com/questions/15866950/#pane4" data-toggle="tab" style="font-size:13px;">Details</a></li> <li><a href="http://stackoverflow.com/questions/15866950/#pane5" data-toggle="tab" style="font-size:13px;">Notification</a></li> </ul> <div class="tab-content"> <div id="pane1" class="tab-pane active"> <input type="hidden" name="ticketId" id="ticketId" value=""/> <input type="hidden" name="oldpage" value="http://stackoverflow.com/questions/15866950/<?php echo $_REQUEST['page']; ?>"/> <p>Please select the project you want to file the report under.</p> <select style="width:350px;" class="chzn-select" name="project"> <option value=""></option> <option>Project 1</option> <option selected>Project 2</option> <option>Project 3</option> <option>Licenser for WHMCS</option> </select> <p class="note">Note: You can change this later.</p>[... content skipped ...] </div><!-- /.tab-content --></div><!-- /.tabbable --></div><div class="modal-footer"> <input type="submit" class="btn btn-primary" value="http://stackoverflow.com/questions/15866950/Create Report" /> <a href="http://stackoverflow.com/questions/15866950/#" class="btn" data-dismiss="modal">Close</a></div></div></form>\[/code\]And in the header of the modal window page I have this javascript:\[code\]<script>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); });});</script>\[/code\]BTW the next page is called with simple PHP that queries the database for new records.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. 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.If you have any question, please let me know.Cheers!