如何防止表单被提交?

我有一个表单，其中某处有一个提交按钮。

然而，我想以某种方式“捕捉”提交事件并防止它发生。

有什么办法能让我做到吗?

我不能修改提交按钮，因为它是自定义控件的一部分。

610162 次浏览
小开

你可以像这样使用内联事件onsubmit

<form onsubmit="alert('stop submit'); return false;" >

或

<script>
function toSubmit(){
alert('I will not submit');
return false;
}
</script>


<form onsubmit="return toSubmit();" >

Demo

在做大项目时，这可能不是一个好主意。您可能需要使用事件侦听器。

请阅读更多关于内联事件vs事件监听器(addEventListener和IE的attachEvent)在这里。因为我不能比克里斯•贝克解释得更多。

两者都是正确的，但没有一个本身是“最好的”，而且可能有 这是开发人员选择使用这两种方法的原因
小开 
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
return false;
}
小开
最佳答案

与其他答案不同，return false只是答案的部分。考虑这样一个场景:JS错误发生在return语句之前…

超文本标记语言

<form onsubmit="return mySubmitFunction(event)">
...
</form>

脚本

function mySubmitFunction()
{
someBug()
return false;
}

在这里返回false将不会被执行，表单将以任何一种方式提交。您还应该调用preventDefault来防止Ajax表单提交的默认表单操作。

function mySubmitFunction(e) {
e.preventDefault();
someBug();
return false;
}

在这种情况下，即使有bug，表单也不会提交!

或者，可以使用try...catch块。

function mySubmit(e) {
e.preventDefault();
try {
someBug();
} catch (e) {
throw new Error(e.message);
}
return false;
}
小开

试试这个……

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

或

$(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。关键是要使用名称event。不能用于例如e.preventDefault()

小开

为了遵循低调的JavaScript编程约定，并取决于DOM加载的速度，使用以下方法可能是个好主意:

<form onsubmit="return false;"></form>

然后使用onload或DOM ready(如果使用库)连接事件。

$(function() {
var $form = $('#my-form');
$form.removeAttr('onsubmit');
$form.submit(function(ev) {
// quick validation example...
$form.children('input[type="text"]').each(function(){
if($(this).val().length == 0) {
alert('You are missing a field');
ev.preventDefault();
}
});
});
});
label {
display: block;
}


#my-form > input[type="text"] {
background: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
<label>Your first name</label>
<input type="text" name="first-name"/>
<label>Your last name</label>
<input type="text" name="last-name" /> <br />
<input type="submit" />
</form>

另外，我总是使用action属性，因为有些人可能会运行一些像NoScript这样的插件，这会破坏验证。如果您正在使用action属性，至少您的用户将根据后端验证被服务器重定向。另一方面，如果你使用的是类似window.location的东西，情况就不好了。

小开

使用.addEventListener()将事件监听器附加到表单，然后在event上调用.preventDefault()方法:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
event.preventDefault();
// actual logic, e.g. validate the form
console.log('Form submission cancelled.');
});
<form>
<button type="submit">Submit</button>
</form>

我认为这是一个比用onsubmit属性内联定义submit事件处理程序更好的解决方案，因为它分离了网页逻辑和结构。在逻辑与HTML分离的情况下，维护项目要容易得多。看到:低调的JavaScript。

使用form DOM对象的.onsubmit属性不是一个好主意，因为它会阻止你对一个元素附加多个提交回调。参见addEventListener vs onclick < / > . < / p >
小开

为了防止表单提交，你只需要这样做。

<form onsubmit="event.preventDefault()">
.....
</form>

通过使用上述代码，这将阻止您的表单提交。

小开

以下是我的回答:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
e.preventDefault();
const name = e.target.name.value;
renderSearching();


return false;
}
</script>

我在onsubmit上添加了event.preventDefault();，它工作了。

小开

你可以将eventListner添加到表单中，即preventDefault()，并将表单数据转换为JSON，如下所示:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
data[element.name] = element.value;
return data;


}, {});


const handleFormSubmit = event => {
event.preventDefault();
const data = formToJSON(form.elements);
console.log(data);
//  const odata = JSON.stringify(data, null, "  ");
const jdata = JSON.stringify(data);
console.log(jdata);


(async () => {
const rawResponse = await fetch('/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: jdata
});
const content = await rawResponse.json();


console.log(content);
})();
};


const form = document.forms['myForm'];
form.addEventListener('submit', handleFormSubmit);
<form id="myForm" action="/" method="post" accept-charset="utf-8">
<label>Checkbox:
<input type="checkbox" name="checkbox" value="on">
</label><br /><br />


<label>Number:
<input name="number" type="number" value="123" />
</label><br /><br />


<label>Password:
<input name="password" type="password" />
</label>
<br /><br />


<label for="radio">Type:
<label for="a">A
<input type="radio" name="radio" id="a" value="a" />
</label>
<label for="b">B
<input type="radio" name="radio" id="b" value="b" checked />
</label>
<label for="c">C
<input type="radio" name="radio" id="c" value="c" />
</label>
</label>
<br /><br />


<label>Textarea:
<textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
</label>
<br /><br />


<label>Select:
<select name="select">
<option value="a">Value A</option>
<option value="b" selected>Value B</option>
<option value="c">Value C</option>
</select>
</label>
<br /><br />


<label>Submit:
<input type="submit" value="Login">
</label>
<br /><br />




</form>

小开 
<form v-on:submit.prevent="yourMethodHere">

提交事件将不再重新加载页面。它运行你的方法。

来自vue文档:https://vuejs.org/guide/essentials/event-handling.html#event-modifiers


提交答案