如何在提交按鈕onclick事件中取消表單提交？

Question

我正在研究一個ASP.net Web應用程序。

我有一個表單提交按鈕。提交按鈕的代碼看起來像<input type='submit' value='submit request' onclick='btnClick();'>。

我想寫的東西像下面這樣：

function btnClick() { 
    if (!validData()) 
     cancelFormSubmission(); 
} 

我該怎麼辦呢？

Answer 1

你最好做...

<form onsubmit="return isValidForm()" /> 

如果isValidForm()回報false，那麼你的形式不提交。

你也應該從內聯移動你的事件處理程序。

document.getElementById('my-form').onsubmit = function() { 
    return isValidForm(); 
}; 

Answer 2

使用onclick='return btnClick();'

和

function btnClick() { 
    return validData(); 
} 

Answer 3

function btnClick() { 
    return validData(); 
} 

Answer 4

您需要更改

onclick='btnClick();' 

到

onclick='return btnClick();' 

和

cancelFormSubmission(); 

到

return false; 

這就是說，我會盡量避免內部事件贊成unobtrusive JS與庫（如YUI或jQuery的）的屬性，有一個好的活動處理API並將其與真正重要的事件聯繫起來（即，表單的提交事件，而不是按鈕的點擊事件）。

Answer 5

您輸入改成這樣：

<input type='submit' value='submit request' onclick='return btnClick();'> 

而且在你的函數返回false

function btnClick() { 
    if (!validData()) 
     return false; 
} 

Answer 6

爲什麼不改變提交按鈕到正規的按鈕，並在單擊事件，提交表單如果它通過你的驗證測試？

e.g

<input type='button' value='submit request' onclick='btnClick();'> 

function btnClick() { 
    if (validData()) 
     document.myform.submit(); 
} 

Answer 7

你需要onSubmit。不是onClick否則有人可以按輸入，它會繞過你的驗證。至於取消。你需要返回false。下面的代碼：

<form onSubmit="return btnClick()"> 
<input type='submit' value='submit request'> 

function btnClick() { 
    if (!validData()) return false; 
} 

編輯的onsubmit所屬的表單標籤。

Answer 8

您需要return false;：

<input type='submit' value='submit request' onclick='return btnClick();' /> 

function btnClick() { 
    return validData(); 
} 

Answer 9

你應該類型更改從submit到button：

<input type='button' value='submit request'> 

，而不是

<input type='submit' value='submit request'> 

那麼你可以在javascript和準你想要的任何行動，它

var btn = document.forms["frm_name"].elements["btn_name"]; 
btn.onclick = function(){...}; 

爲我工作 希望它可以幫助你的按鈕的名稱。

Answer 10

很簡單，只是返回false;

下面的代碼使用jQuery ..

if(conditionsNotmet) 
{ 
return false; 
} 

Answer 11

有時onsubmit不會與asp.net工作順利提交按鈕的onclick內。

我用非常簡單的方法解決了這個問題。

如果我們有這樣一個形式

<form method="post" name="setting-form" > 
    <input type="text" id="UserName" name="UserName" value="" 
     placeholder="user name" > 
    <input type="password" id="Password" name="password" value="" placeholder="password" > 
    <div id="remember" class="checkbox"> 
    <label>remember me</label> 
    <asp:CheckBox ID="RememberMe" runat="server" /> 
    </div> 
    <input type="submit" value="login" id="login-btn"/> 
</form> 

現在，您可以捕捉得到的形式回發之前該事件，並從回傳阻止它，做所有你想用這個jQuery的阿賈克斯。

$(document).ready(function() { 
      $("#login-btn").click(function (event) { 
       event.preventDefault(); 
       alert("do what ever you want"); 
      }); 
});