如何在“提交”按钮onclick事件中取消表单提交？

我正在使用ASP.net Web应用程序。

我有一个带有提交按钮的表格。提交按钮的代码如下所示<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 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，并将其绑定到真正重要的事件（即表单的Submit事件）中按钮的点击事件）。

有时onsubmit无法与asp.net一起使用。

我用很简单的方法解决了。

如果我们有这样的表格

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

您应该将类​​型从更改submit为button：

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

代替

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

然后，您会在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();
}

为什么不将“提交”按钮更改为常规按钮，并在单击事件上通过了验证测试就提交您的表单？

例如

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

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

你需要onSubmit。不是onClick，否则有人可以只按回车键，它会绕过您的验证。至于取消。您需要返回false。这是代码：

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

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

编辑 onSubmit属于form标记。

很简单，只需返回false即可；

下面的代码在使用jquery的提交按钮的onclick中。

if(conditionsNotmet)
{
return false;
}

用 onclick='return btnClick();'

和

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

使用JQuery更加简单：可在Asp.Net MVC和Asp.Core中使用

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>