通过单击Enter并从Bootstrap模态窗口中单击Submit按钮来提交表单数据

小编典典

通过单击Enter并从Bootstrap模态窗口中单击Submit按钮来提交表单数据

ajax

这是我的模式窗口中的表格：

我没有关闭按钮，并且在按esc时已禁用了关闭窗口的功能。我希望能够在按“提交”或按Enter键时提交表单数据。

<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脚本不会运行。有人可以告诉我我的脚本是否与模态窗口的默认设置冲突？

阅读 198

2020-07-26

共1个答案

小编典典

监听表单submit事件-它由enter和click事件触发。

标记

<form id="yourForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit">
</form>

$('#yourForm').submit(function(event){

  // prevent default browser behaviour
  event.preventDefault();

  //do stuff with your form here
  ...

});

2020-07-26