106

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

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

我想写如下内容:

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

我该怎么做呢?

4

14 回答 14

194

你最好做...

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

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

您还应该将事件处理程序从内联中移出。

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};
于 2010-11-19T16:29:03.633 回答
45

将您的输入更改为:

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

并在你的函数中返回 false

function btnClick() {
    if (!validData())
        return false;
}
于 2010-11-19T16:28:08.370 回答
16

你需要改变

onclick='btnClick();'

onclick='return btnClick();'

cancelFormSubmission();

return false;

也就是说,我会尽量避免内在的事件属性,转而使用具有良好事件处理 API 的库(例如 YUI 或 jQuery)并与真正重要的事件(即表单的提交事件)联系起来的不显眼的 JS按钮的单击事件)。

于 2010-11-19T16:27:36.300 回答
6

您应该将类​​型从更改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(){...};

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

于 2012-09-11T14:26:50.250 回答
6

有时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");
            });
 });
于 2015-10-09T12:39:59.437 回答
4

你需要return false;

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

function btnClick() {
    return validData();
}
于 2010-11-19T16:29:23.033 回答
4

这是一个非常古老的线程,但肯定会引起注意。因此请注意,提供的解决方案不再是最新的,并且现代 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 中。

于 2020-10-26T22:20:05.683 回答
2

为什么不将提交按钮更改为常规按钮,并在单击事件中提交您的表单,如果它通过了您的验证测试?

例如

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

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 
于 2010-11-19T16:28:20.503 回答
1

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

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

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

Edit onSubmit 属于表单标签。

于 2010-11-19T16:28:53.697 回答
1

很简单,返回false即可;

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

if(conditionsNotmet)
{
return false;
}
于 2013-03-31T09:30:46.187 回答
1

使用 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>
于 2020-03-28T17:24:38.090 回答
0

利用onclick='return btnClick();'

function btnClick() {
    return validData();
}
于 2010-11-19T16:27:14.820 回答
0
function btnClick() {
    return validData();
}
于 2010-11-19T16:27:22.043 回答
0
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>
于 2018-08-14T15:31:15.303 回答