Question

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

我有一个带有提交按钮的表单。提交按钮的代码类似于<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;

也就是说，我试图避免使用具有良好事件处理API的库（例如YUI或jQuery）的unobtrusive JS的内部事件属性，并将其与真正重要的事件联系起来（即表单的提交事件，而不是按钮的单击事件。

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>

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

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

Answer 5

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

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

Answer 6

您需要return false;：

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

function btnClick() {
    return validData();
}

Answer 7

为什么不将提交按钮更改为常规按钮，如果单击事件通过验证测试，则提交单击事件？

e.g

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

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

Answer 8

这很简单，只返回false;

以下代码使用jquery ..

进入提交按钮的onclick

if(conditionsNotmet)
{
return false;
}

Answer 9

这是一个非常旧的线程，但一定会注意到它。因此，请注意，提供的解决方案已不再是最新的，并且现代Javascript更好。

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

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

P.S。这也适用于属性 onsubmit 。然后，匿名函数 function（event）{...} 必须在表单的属性 onsubmit 中。这不是很现代，您只能使用一个事件处理程序进行提交。但是您不必创建额外的JavaScript。此外，可以直接在源代码中将其指定为表单的属性，而无需等到表单集成到DOM中。

Answer 10

使用onclick='return btnClick();'

和

function btnClick() {
    return validData();
}

Answer 11

function btnClick() {
    return validData();
}

Answer 12

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

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

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

修改 onSubmit属于表单标记。

Answer 13

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

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

Answer 14

使用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>

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

14 个答案: