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

Question

我正在开发一个ASP.net Web应用程序.

我有一个带有提交按钮的表单.提交按钮的代码如下所示<input type='submit' value='submit request' onclick='btnClick();'>.

我想写下面的内容:

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

我该怎么做呢？

Answer 1

你最好做...

<form onsubmit="return isValidForm()" />

如果isValidForm()退货false,那么您的表单不会提交.

您还应该从内联移动事件处理程序.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};

Answer 2

将您的输入更改为:

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

并在函数中返回false

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

Answer 3

你需要改变

onclick='btnClick();'

至

onclick='return btnClick();'

和

cancelFormSubmission();

至

return false;

也就是说,我试图避免使用内部事件属性来支持不显眼的JS与库(如YUI或jQuery),它具有良好的事件处理API并且与真正重要的事件相关联(即表单的提交事件而不是按钮的点击事件).

Answer 4

有时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>

现在，您可以在表单回发之前捕获get该事件，并从回发中停止该事件，并使用此jquery执行您想要的所有ajax。

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });

Answer 5

这是一个非常古老的线程，但肯定会引起注意。因此，请注意，所提供的解决方案不再是最新的，现代 Javascript 更好。

<script>
document.getElementById(id of the form).addEventListener(
    "submit",
    function(event)
    {
        if(validData() === false)
        {
            event.preventDefault();
        }
    },
    false
);

该表单接收一个监视提交的事件处理程序。如果调用的函数validData（此处未显示）返回 FALSE，则调用PreventDefault方法，该方法将禁止表单提交，并且浏览器将返回到输入。否则，表格将照常发送。

PS 这也适用于属性onsubmit。那么匿名函数function(event){...}必须在表单的onsubmit属性中。这并不是真正的现代，您只能使用一个事件处理程序来进行提交。但您不必创建额外的 javascript。另外，它可以直接在源代码中指定为表单的属性，而无需等到表单集成到 DOM 中。

Answer 6

你应该从改变类型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(){...};

为我工作希望它有所帮助.