如何在提交buttononclick事件中取消表单提交?

我正在研究一个ASP.net的Web应用程序。

我有一个提交button的表单。 提交button的代码看起来像<input type='submit' value='submit request' onclick='btnClick();'>

我想写下如下内容:

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

我如何做到这一点?

你最好做…

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

如果isValidForm()返回false ,则表单不提交。

你也应该从内联移动你的事件处理程序。

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

将您的input更改为:

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

并在你的函数中返回false

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

你需要改变

 onclick='btnClick();' 

 onclick='return btnClick();' 

 cancelFormSubmission(); 

 return false; 

也就是说,我试图避免内在的事件属性,以支持具有良好事件处理API的图书馆(如YUI或jQuery)的不引人注目的JS ,并将其绑定到真正重要的事件中(即表单的提交事件button的点击事件)。

你应该改变从submitbutton的types:

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

代替

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

然后你得到你的button的名称在JavaScript中,并将您想要的任何行动联系起来

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

为我工作希望它有帮助。

你需要return false;

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

有时onsubmit不会与asp.net工作。

我用非常简单的方法解决了它。

如果我们有这样的forms

 <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来做所有你想要的ajax。

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

为什么不将提交button更改为常规button,并且在点击事件中,如果通过了validationtesting,则提交表单?

例如

 <input type='button' value='submit request' onclick='btnClick();'> function btnClick() { if (validData()) document.myform.submit(); } 

使用onclick='return btnClick();'

 function btnClick() { return validData(); } 
 function btnClick() { return validData(); } 

你需要onSubmit 。 不onClick否则有人可以按input,它会绕过你的validation。 至于取消。 你需要返回false。 代码如下:

 <form onSubmit="return btnClick()"> <input type='submit' value='submit request'> function btnClick() { if (!validData()) return false; } 

编辑 onSubmit所属的表单标签。

这很简单,只是返回false;

下面的代码在使用jquery的提交button的onclick ..

 if(conditionsNotmet) { return false; }