我正在开发一个 ASP.net Web 应用程序。
我有一个带有提交按钮的表单。提交按钮的代码类似于<input type='submit' value='submit request' onclick='btnClick();'>。
我想写如下内容：
function btnClick() {
if (!validData())
cancelFormSubmission();
}
我该怎么做？
【问题讨论】：
submit 输入。我想我会尝试在此页面上使用服务器端控件。
标签： javascript html forms html-input
你最好这样做......
<form onsubmit="return isValidForm()" />
如果isValidForm() 返回false，则您的表单不会提交。
您还应该将事件处理程序从内联中移出。
document.getElementById('my-form').onsubmit = function() {
return isValidForm();
};
【讨论】：
onsubmit 在我使用 ASP.net 时工作，因为 asp.net 以自己的形式包装了所有内容......
将您的输入更改为：
<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 并与真正重要的事件（即表单的提交事件而不是按钮的点击事件）。
【讨论】：
有时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();
}
【讨论】：
这是一个非常古老的线程，但肯定会引起注意。因此请注意，提供的解决方案不再是最新的，而现代 Javascript 更好。
<script>
document.getElementById(id of the form).addEventListener(
"submit",
function(event)
{
if(validData() === false)
{
event.preventDefault();
}
},
false
);
表单接收一个监控提交的事件处理程序。如果调用函数 validData（此处未显示）返回 FALSE，则调用方法 PreventDefault，该方法禁止提交表单，浏览器返回输入。否则表格将照常发送。
附：这也适用于属性onsubmit。那么匿名函数function(event){...}必须在表单的属性onsubmit中。这不是很现代，您只能使用一个事件处理程序进行提交。但是您不必创建额外的 javascript。另外，可以直接在源代码中指定为表单的属性，无需等到表单集成到DOM中。
【讨论】：
为什么不将提交按钮更改为常规按钮，并在点击事件中提交您的表单，如果它通过了您的验证测试？
例如
<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;
}
Edit onSubmit 属于表单标签。
【讨论】：
很简单，返回false即可；
下面的代码在使用 jquery 的提交按钮的 onclick 中..
if(conditionsNotmet)
{
return false;
}
【讨论】：
使用 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='return btnClick();'
和
function btnClick() {
return validData();
}
【讨论】：
function btnClick() {
return validData();
}
【讨论】：
ev.preventDefault() 或ev.returnValue = false 来取消默认行为但不阻止事件冒泡，以防其他控件在同一元素上观察到同一事件。仅当您想阻止事件冒泡并取消默认操作时，才使用return false。见this article。
<input type='button' onclick='buttonClick()' />
<script>
function buttonClick(){
//Validate Here
document.getElementsByTagName('form')[0].submit();
}
</script>
【讨论】：