Question

此代码有效：

<form id="myform" action="" method="">
    <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Email address">
    <input type="password" class="form-control" name="inputPassword" id="inputPassword" placeholder="Password">
    <a id="login" type="submit" class="btn btn-info btn-block login">Log in</a>
</form>

$('#login').click(function() { 
    $.ajax
    ({
        type: "POST",
        url: "http://www.domain.com/includes/login.php",
        data: $('form').serialize(),
        success: function(data)
            {
                alert( "Data Saved: " + data );
            },
        error: function()
        {
            alert("fail");
        }
    })
});

但是，它只允许我通过单击登录按钮执行AJAX请求，而不是按Enter键。

我试图找到解决方法，但我提出的两种方法都没有做任何事情 - 没有错误。

// method 1 - change .click() to .submit()

<form id="myform" action="" method="">
    <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Email address">
    <input type="password" class="form-control" name="inputPassword" id="inputPassword" placeholder="Password">
    <a id="login" type="submit" class="btn btn-info btn-block login">Log in</a>
</form>

$('#login').submit(function() { 
    $.ajax
    ({
        type: "POST",
        url: "http://www.domain.com/includes/login.php",
        data: $('form').serialize(),
        success: function(data)
            {
                alert( "Data Saved: " + data );
            },
        error: function()
        {
            alert("fail");
        }
    })
});

// method 2 - change .click() to .submit() and #login to #myform

<form id="myform" action="" method="">
    <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Email address">
    <input type="password" class="form-control" name="inputPassword" id="inputPassword" placeholder="Password">
    <a id="login" type="submit" class="btn btn-info btn-block login">Log in</a>
</form>

$('#myform').submit(function() { 
    $.ajax
    ({
        type: "POST",
        url: "http://www.domain.com/includes/login.php",
        data: $('form').serialize(),
        success: function(data)
            {
                alert( "Data Saved: " + data );
            },
        error: function()
        {
            alert("fail");
        }
    })
});

如何通过点击按钮或按Enter键来提交表单？

Answer 1

使用提交但使用preventDefault

登录

$('#myform').submit(function(e) { 
    e.preventDefault();
    $.ajax
    ({
        type: "POST",
        url: "http://www.domain.com/includes/login.php",
        data: $('form').serialize(),
        success: function(data)
            {
                alert( "Data Saved: " + data );
            },
        error: function()
        {
            alert("fail");
        }
    })
});

编辑：不确定您是否可以输入类型=＆＃34;提交＆＃34;在链接上可以吗？如果链接没有触发表单提交，请将其更改为按钮

编辑HTML：

<form id="myform" action="" method="">
    <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Email address">
    <input type="password" class="form-control" name="inputPassword" id="inputPassword" placeholder="Password">
    <button id="login" type="submit" class="btn btn-info btn-block login">Log in</button>
</form>

See it working如果您想使用CSS，可以将button元素设置为链接样式

Answer 2

<form id="myform">
    <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="Email address">
    <input type="password" class="form-control" name="inputPassword" id="inputPassword" placeholder="Password">
    <a id="login" type="submit" class="btn btn-info btn-block login" onclick="$(this).closest('form').submit()">Log in</a>
</form>

$('#myform').on('submit',function(e){ 
    e.preventDefault();
    $.ajax
        ({
        type: "POST",
        url: "http://www.domain.com/includes/login.php",
        data: $('myform').serialize(),
        success: function(data)
            {
                alert( "Data Saved: " + data );
            },
        error: function()
        {
            alert("fail");
        }
    })
});

AJAX请求适用于.click（）但不适用.submit（）

2 个答案: