I have this HTML code for a form in a modal (using Bootstrap)
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="edit-user-modal-label" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form name="login_form" action="test.php" method="post" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<input id="submit" name="submit" type="submit" value="Ok" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
The problem is that when I click on the "ok" button, doesn't happen anything. This is the "test.php" file (which I only used to see if it worked)
<html>
logged
</html>
I'm new in bootstrap so I'm not quite sure about why it does not work as an usual HTML+CSS page. Thanks for your help!
EDIT
I found this AJAX code, tried to addapt it into my code but still didn't work.
$(document).ready(function () {
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "test.php", //
data: $('form.login_form').serialize(),
success: function(msg){
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
By now, I just want to go to another PHP page after pressing the button (I haven't coded the login validation yet).
I see what is happening, just add this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
$('#loginModal').modal('show');
});
</script>
The most obvious part of your problem is that, while you're performing an AJAX call, you'r not actually preventing the form from submitting. You don't want to submit the page, but instead wait for the ajax request to end, and process the response in your success callback. Since you're using jQuery, the easiest way to do that is to return false from the event callback:
$(document).ready(function () {
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "test.php", //
data: $('form.login_form').serialize(),
success: function(msg){
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});
return false;//stop form submission
});
});
jQuery's return false is the equivalent of vanilla-JS's:
eventObj.preventDefault();//do not handle event in a normal fashion
eventObj.stopPropagation();//do not propagate event to other handlers
Having said that, your selector and event binding could be better, I'd set an ID for the form (<form id='modalformid'>), and bind the submit event (which can be triggered by the user pressing enter), and then bind the handler like so:
$('#modalformid').on('submit', function()
{
var frm = $(this);//reference to the form that is submitted
$.ajax({
type: "POST",
url: "test.php",
data: frm.serialize(),//serialize correct form
success: function(msg) {
//the response from the server is in msg here!
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});//your ajax call here
return false;
});
I'd also check the console to make sure you're including all JS dependencies (ie jQuery) before you're calling $(document).ready() and double-check for name conflicts (in console console.log($) and console.log($ === jQuery)).
Lastly, the $('form.login_form') selector is not reliable: ID's are by definition unique. Classes aren't. using $('form.login_form') could, in theory, match more than one form. rule of thumb: classes are useful for CSS rules, not so much for JS event handling (delegation asside), if you want to handle a single form/element: use an ID.