Javascript 如何在提交按钮 onclick 事件中取消表单提交?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4227043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I cancel form submission in submit button onclick event?
提问by Vivian River
I'm working on an ASP.net web application.
我正在开发一个 ASP.net Web 应用程序。
I have a form with a submit button. The code for the submit button looks like <input type='submit' value='submit request' onclick='btnClick();'>
.
我有一个带有提交按钮的表单。提交按钮的代码如下所示<input type='submit' value='submit request' onclick='btnClick();'>
。
I want to write something like the following:
我想写如下内容:
function btnClick() {
if (!validData())
cancelFormSubmission();
}
How do I do this?
我该怎么做呢?
回答by alex
You are better off doing...
你最好这样做...
<form onsubmit="return isValidForm()" />
If isValidForm()
returns false
, then your form doesn't submit.
如果isValidForm()
返回false
,则您的表单不会提交。
You should also probably move your event handler from inline.
您可能还应该从内联移动您的事件处理程序。
document.getElementById('my-form').onsubmit = function() {
return isValidForm();
};
回答by mikefrey
Change your input to this:
将您的输入更改为:
<input type='submit' value='submit request' onclick='return btnClick();'>
And return false in your function
并在您的函数中返回 false
function btnClick() {
if (!validData())
return false;
}
回答by Quentin
You need to change
你需要改变
onclick='btnClick();'
to
到
onclick='return btnClick();'
and
和
cancelFormSubmission();
to
到
return false;
That said, I'd try to avoid the intrinsic event attributes in favour of unobtrusive JSwith a library (such as YUI or jQuery) that has a good event handling API and tie into the event that really matters (i.e. the form's submit event instead of the button's click event).
这就是说,我会尽量避免赞成内在事件属性不显眼JS带库(如YUI或jQuery的),有一个很好的事件处理API和领带到真正重要的事件(即表单提交事件,而不是按钮的点击事件)。
回答by Shady Sherif
Sometimes onsubmit
wouldn't work with asp.net.
有时onsubmit
不适用于 asp.net。
I solved it with very easy way.
我用非常简单的方法解决了它。
if we have such a form
如果我们有这样的表格
<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>
You can now catch get that event before the form postback and stop it from postback and do all the ajax you want using this jquery.
您现在可以在表单回发之前捕获该事件并停止回发并使用此 jquery 执行您想要的所有 ajax。
$(document).ready(function () {
$("#login-btn").click(function (event) {
event.preventDefault();
alert("do what ever you want");
});
});
回答by Mohammed
you should change the type from submit
to button
:
您应该将类型从 更改submit
为button
:
<input type='button' value='submit request'>
instead of
代替
<input type='submit' value='submit request'>
you then get the name of your button in javascript and associate whatever action you want to it
然后您在 javascript 中获取按钮的名称并将您想要的任何操作关联到它
var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};
worked for me hope it helps.
为我工作希望它有帮助。
回答by SLaks
You need to return false;
:
你需要return false;
:
<input type='submit' value='submit request' onclick='return btnClick();' />
function btnClick() {
return validData();
}
回答by omar-ali
It's simple, just return false;
很简单,返回false即可;
The below code goes within the onclick of the submit button using jquery..
下面的代码在使用 jquery 的提交按钮的 onclick 中。
if(conditionsNotmet)
{
return false;
}
回答by George Johnston
Why not change the submit button to a regular button, and on the click event, submit your form if it passes your validation tests?
为什么不将提交按钮更改为常规按钮,并在单击事件中通过验证测试提交表单?
e.g
例如
<input type='button' value='submit request' onclick='btnClick();'>
function btnClick() {
if (validData())
document.myform.submit();
}
回答by Cfreak
You need onSubmit
. Not onClick
otherwise someone can just press enter and it will bypass your validation. As for canceling. you need to return false. Here's the code:
你需要onSubmit
. 不是onClick
,否则有人可以只按回车键,它会绕过您的验证。至于取消。你需要返回false。这是代码:
<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>
function btnClick() {
if (!validData()) return false;
}
EditonSubmit belongs in the form tag.
编辑onSubmit 属于表单标签。
回答by Adam
use onclick='return btnClick();'
用 onclick='return btnClick();'
and
和
function btnClick() {
return validData();
}