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).