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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 11:28:33  来源:igfitidea点击:

How do I cancel form submission in submit button onclick event?

javascripthtmlformshtml-input

提问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 onsubmitwouldn'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 submitto button:

您应该将类​​型从 更改submitbutton

<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 onClickotherwise 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();
}