AJAX request works with .click() but not .submit()

Question

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.

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?

Answer 1

Use submit but with preventDefault

Log in

 $('#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

Edited 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 button element to look like a link if you want with CSS

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