我有一个表单,其中某处有一个提交按钮。
然而,我想以某种方式“捕捉”提交事件并防止它发生。
有什么办法能让我做到吗?
我不能修改提交按钮,因为它是自定义控件的一部分。
我有一个表单,其中某处有一个提交按钮。
然而,我想以某种方式“捕捉”提交事件并防止它发生。
有什么办法能让我做到吗?
我不能修改提交按钮,因为它是自定义控件的一部分。
当前回答
与其他答案不同,返回false只是答案的一部分。考虑这样一个场景:JS错误发生在return语句之前…
html
<form onsubmit="return mySubmitFunction(event)">
...
</form>
脚本
function mySubmitFunction()
{
someBug()
return false;
}
这里返回false将不会被执行,表单将以任何一种方式提交。还应该调用preventDefault来防止Ajax表单提交的默认表单操作。
function mySubmitFunction(e) {
e.preventDefault();
someBug();
return false;
}
在这种情况下,即使有bug,表单也不会提交!
或者,尝试…可以使用Catch块。
function mySubmit(e) {
e.preventDefault();
try {
someBug();
} catch (e) {
throw new Error(e.message);
}
return false;
}
其他回答
你可以像这样使用内联事件onsubmit
<form onsubmit="alert('stop submit'); return false;" >
Or
<script>
function toSubmit(){
alert('I will not submit');
return false;
}
</script>
<form onsubmit="return toSubmit();" >
Demo
在做大项目时,这可能不是一个好主意。您可能需要使用事件侦听器。
请阅读更多关于内联事件vs事件监听器(addEventListener和IE的attachEvent)在这里。因为我不能比克里斯·贝克解释得更清楚。
两者都是正确的,但没有一个是“最好的”,而且可能有 开发人员选择使用这两种方法的原因。
使用.addEventListener()将事件监听器附加到表单,然后在事件上调用.preventDefault()方法:
const element = document.querySelector('form'); 元素。addEventListener('submit', event => { event.preventDefault (); //实际的逻辑,例如验证表单 console.log('表单提交已取消'); }); < >形式 <按钮类型=“提交”> > < /按钮提交 > < /形式
我认为这是一个比在onsubmit属性中定义一个提交事件处理程序更好的解决方案,因为它分离了网页逻辑和结构。在逻辑与HTML分离的情况下,维护项目要容易得多。参见:Unobtrusive JavaScript。
使用表单DOM对象的.onsubmit属性不是一个好主意,因为它会阻止您将多个提交回调函数附加到一个元素。参见addEventListener vs onclick .
为了防止表单提交,你只需要这样做。
<form onsubmit="event.preventDefault()">
.....
</form>
通过使用上述代码,这将阻止您的表单提交。
试试这个……
HTML代码
<form class="submit">
<input type="text" name="text1"/>
<input type="text" name="text2"/>
<input type="submit" name="Submit" value="submit"/>
</form>
jQuery代码
$(function(){
$('.submit').on('submit', function(event){
event.preventDefault();
alert("Form Submission stopped.");
});
});
or
$(function(){
$('.submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
alert("Form Submission prevented / stopped.");
});
});
以下是目前为止的工作(在chrome和firefox测试):
<form onsubmit="event.preventDefault(); return validateMyForm();">
其中validateMyForm()是一个函数,如果验证失败则返回false。关键是使用名称事件。我们不能使用例如e.c epreventdefault ()