jQuery 在 Bootstrap 模式窗口中单击 Enter 和点击提交按钮时提交表单数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19297520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit form data both on clicking enter and hitting the submit button from a Bootstrap modal window
提问by Anon
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.
我没有关闭按钮，而且我已经禁用了在按 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>
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?
在输入我的密码或单击提交按钮后按 Enter 时，同一页面会重新加载并且 ajax 脚本不会运行。有人能告诉我我的脚本是否与我的模态窗口的默认设置冲突吗？
回答by moonwave99
Listen to form submitevent - it gets triggered by both enter and click events.
侦听表单submit事件 - 它由输入和点击事件触发。
Markup
标记
<form id="yourForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Submit">
</form>
JS
JS
$('#yourForm').submit(function(event){
// prevent default browser behaviour
event.preventDefault();
//do stuff with your form here
...
});
回答by om_deshpande
- Change type="submit" from your login button to type="button".
- 将 type="submit" 从您的登录按钮更改为 type="button"。
EDIT: 2. Try removing data-keyboard="false".
编辑： 2. 尝试删除 data-keyboard="false"。
回答by gopal-kashy
I have done that where the submit form would open in modal dialog box and, after that, submit the whole entry in the fields. If you click on submit button, entry would done on the database and instantly the page is redirected to same page with new data. There is no need to refresh to see the recent entered data. Hope this helps.
我已经完成了提交表单将在模式对话框中打开的地方，然后在字段中提交整个条目。如果您单击提交按钮，将在数据库上完成输入，并且页面会立即重定向到具有新数据的同一页面。无需刷新即可查看最近输入的数据。希望这可以帮助。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">ADD CONTENT</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Please Add Content</h4>
</div>
<div class="modal-body">
<form role="form" action="" method="POST">
<!-- YOUR HTML FORM GOES HERE--->
<button type="submit" name="submit" class="btn btn-primary btn-lg"id="sub" onclick="SUBMISSION()" >Submit </button>
</fieldset>
</form>
<?php
if(isset($_POST['submit']))
{
SUBMISSION();
}
function SUBMISSION()
{
// UR CONNECTION ESTABLISHMENT CODE GOES HERE
// SQL QUERY FOR INSERTION IN FIELDS
echo"<script type=\"text/javascript\">
document.location.href='http://localhost/dict/pages/YOURPAGE.php';
</script>";
$conn->CLOSE();
}
?>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
