Here's my form that's in my modal window:
I have no close button and I have disabled the window from closing on pressing esc. I want to be able to submit the form data on pressing submit or on pressing the enter key.
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<h3 id="myModalLabel">Enter your Credentials</h3>
</div>
<div class="modal-body">
<form id="login-form" class="form-horizontal" accept-charset="UTF-8" data-remote="true"">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="email" name="email" value="" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="passwd" name="passwd" value="" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<input type="submit" id="login" value="Login"class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
Here's the script I'm using:
$(document).ready(function(){
$('#myModal').modal('show');
});
function submitLogin() {
$.ajax({
url:"login_mysql.php",
type:'POST',
dataType:"json",
data: $("#login-form").serialize()
}).done(function(data){
//do something
});
}
$('#passwd').keypress(function(e) {
if (e.which == '13') {
submitLogin();
}
});
$('#login').click(function(){
submitLogin();
});
On pressing enter after keying in my password or clicking on the submit button the same page reloads and the ajax script does not run. Could someone tell me if my script is clashing with the default settings of my modal window?