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">×</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"> <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.
Comments
Post a Comment