javascript - Bootstrap: Form submit not working in modal box -

below model box , using login. when click on button(both) page reload self. checked in firebug , found this. localhost\index.php?submit=login

<div class="modal fade" id="loginmodal" tabindex="-1" role="dialog" aria-labelledby="loginmodallabel" aria-hidden="true"> <div class="modal-dialog">     <form method="post" id="login" name="login" action="login_exec.php" role="form">          <div class="modal-content login-modal">             <div class="modal-header login-modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span>                 </button>                 <font color="#288dcb"><h3 class="modal-titles text-center" id="loginmodallabel">authentication</h3></font>             </div>             <div class="modal-body">                 <div class="text-center">                     <div role="tabpanel" class="login-tab">                         <!-- tab panes -->                         <div class="tab-content">                             <div role="tabpanel" class="tab-pane active text-center" id="emphome">                                 &nbsp;&nbsp;                                 <span id="login_fail" class="response_error" style="display: none;">loggin failed, please try again.</span>                                 <div class="clearfix"></div>                                  <div class="form-group">                                     <div class="input-group">                                         <div class="input-group-addon"><i class="fa fa-user"></i>                                         </div>                                         <input type="text" class="form-control" id="login_username" placeholder="email address" required="required">                                     </div>                                     <span class="help-block has-error" id="email-error"></span>                                 </div>                                 <div class="form-group">                                     <div class="input-group">                                         <div class="input-group-addon"><i class="fa fa-lock"></i>                                         </div>                                         <input type="password" class="form-control" id="password" placeholder="password" required="required">                                     </div>                                     <span class="help-block has-error" id="password-error"></span>                                 </div>                                  <input type="submit" value="login" id="submit" name="submit" class="btn btn-primary">                                 <button type="submit" value=" send" class="btn btn-success" id="submit" />                                 <div class="clearfix"></div>                              </div>                         </div>                     </div>                 </div>             </div>         </div>     </form> </div> 

i not able find reason why working this. tried button , input type same result.

here javascript code.

<script type="text/javascript"> $(document).ready(function () { $("#login").on("submit", function(e) {               e.preventdefault;  alert("failure");     $.ajax({         type: "post",         url: "logic_exec.php", //process mail         data: $('form.login').serialize(),         success: function(msg){             $("#thanks").html(msg) //hide button , show thank             $("#form-content").modal('hide'); //hide popup           },         error: function(){             alert("failure");         }     }); }); });   </script> 

i using alert("failure"); check script working on button click not working. think event not firing.

to modal submit without reloading entire page, modal "submit" button needs call javascript type="button" onclick="submitmyinfo();" instead of submit. javascript function can use ajax submit information, if successful, can whatever need, close modal.