AJAX請求與工作。點擊（），但不.submit（）

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請求，不按進入。

我試圖找到解決方法，但我提出的兩種方法什麼都不做 - 沒有錯誤。

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

如何通過點擊按鈕或按下回車鍵允許表單提交？

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

編輯：不知道你可以有一個類型=一個鏈接 「提交」 你能？如果該鏈接不觸發表單提交其更改爲一個按鈕，而不是

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