AJAX请求使用.click()而不是.submit()

This code works:

这段代码:

<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");
        }
    })
});

However, it only lets me execute the AJAX request by clicking the log in button, not pressing enter.

但是，它只允许我按下按钮，而不是按回车键来执行AJAX请求。

I've tried to find a way around it, but the two methods I've come up with do nothing - no errors.

我试图找到一种方法来解决这个问题，但是我提出的两种方法什么都不做——没有错误。

// 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");
        }
    })
});

How can I allow form submission by either clicking the button or pressing enter?

如何通过单击按钮或按下enter来允许表单提交?

2 个解决方案

#1

Use submit but with preventDefault

使用submit，但使用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");
        }
    })
});

Edit: Not sure you can have a type="submit" on a link can you? If the link doesn't trigger the form submit change it to a button instead

编辑:不确定你可以在一个链接上有一个类型="submit"，你可以吗?如果链接没有触发表单提交，那么将它改为按钮

Edited HTML:

编辑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 You can style a buttonelement to look like a link if you want with CSS

如果你想使用CSS的话，你可以把buttonelement设计成一个链接

#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");
        }
    })
});

#1