如何取消提交按钮onclick事件中的表单提交?

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();'>.

我有一个带有提交按钮的表单。提交按钮的代码看起来像。

I want to write something like the following:

我想写如下内容:

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

How do I do this?

我该怎么做呢?

11 个解决方案

#1

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

#2

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;
}

#3

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 JS with 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).

尽管如此，我还是尽量避免使用内部事件属性，而是使用一个库(比如YUI或jQuery)，该库具有良好的事件处理API，并与真正重要的事件(例如表单的提交事件而不是按钮的单击事件)绑定。

#4

you should change the type from submit to 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.

我希望它能帮上忙。

#5

You need to return false;:

您需要返回false;

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

function btnClick() {
    return validData();
}

#6

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");
            });
 });

#7

Why not change the submit button to a regular button, and on the click event, submit your form if it passes your validation tests?

为什么不将submit按钮更改为常规按钮，在单击事件中，如果表单通过了验证测试，就提交它呢?

e.g

如

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

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 

#8

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;
}

#9

use onclick='return btnClick();'

使用onclick = '返回btnClick();”

and

和

function btnClick() {
    return validData();
}

#10

function btnClick() {
    return validData();
}

#11

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，否则有人只需按enter就可以绕过验证。至于取消。你需要返回false。这是代码:

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

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

Edit onSubmit belongs in the form tag.

在表单标签中编辑onSubmit。