如何在提交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的点击事件)。
你应该改变从submit
到button
的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; }