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

IT技术 javascript html forms html-input
2021-01-28 12:50:30

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

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

我想写如下内容:

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

我该怎么做呢?

6个回答

你最好这样做...

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

如果isValidForm()返回false,则您的表单不会提交。

您可能还应该从内联移动您的事件处理程序。

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};
其他人的回答与您完全一样stackoverflow.com/a/23604664/1639385我认为这太巧合了。
2021-03-14 12:50:30
你可以使用他的第二个建议。内联 javascript 无论如何都是魔鬼。
2021-03-31 12:50:30
很好,但似乎onsubmit每当我使用 ASP.net 时我都无法开始工作,因为 asp.net 以它自己的形式包装了一切......
2021-04-06 12:50:30
如果您使用的是 ASP.NET Web 表单(提示:不要),则不要尝试包含其他表单。它们简直不相容。我听说 ASP.NET MVC 允许您使用惯用标记构建 Web 应用程序。
2021-04-10 12:50:30
@David,如果使用其他表单与 ASP.net Web 表单不兼容,那么我应该只使用服务器端控件吗?
2021-04-11 12:50:30

将您的输入更改为:

<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(即表单的提交事件)按钮的点击事件)。

使用 onclick 将允许用户按回车键并绕过检查。
2021-04-05 12:50:30

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

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

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

为我工作希望它有帮助。