这是我的模式窗口中的表单:
我没有关闭按钮,并且我已禁用按 esc 时关闭窗口。我希望能够在按提交或按回车键时提交表单数据。
<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>
这是我正在使用的脚本:
$(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();
});
输入密码后按 Enter 或单击提交按钮时,同一页面会重新加载,并且 ajax 脚本不会运行。有人可以告诉我我的脚本是否与模式窗口的默认设置冲突吗?
最佳答案
监听表单submit
事件 - 它由输入和点击事件触发。
标记
<form id="yourForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Submit">
</form>
JS
$('#yourForm').submit(function(event){
// prevent default browser behaviour
event.preventDefault();
//do stuff with your form here
...
});
关于javascript - 在 Bootstrap 模式窗口中单击 Enter 和点击提交按钮时提交表单数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19297520/