如何在提交按钮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"); 
      }); 
});