如何停止使用 Javascript 重新加载表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5150532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i stop the form from reloading using Javascript?
提问by Ibrahim Azhar Armar
When a User Submits the form i want to stop the default behavior of the form. ie it should not reload. so that i can perform the AJAX request.
当用户提交表单时，我想停止表单的默认行为。即它不应该重新加载。这样我就可以执行 AJAX 请求。
here is the code i used.
这是我使用的代码。
<script type="text/javascript">
function validateForm()
{
return false;
}
</script>
<form action="" name="contact" onsubmit="validateForm();">
<input type="text" name="name" value="Enter Your Name..."/>
<input type="submit" name="submit"/>
</form>
this does not stop the form from being submitted or reloaded. how do i achieve this?
这不会阻止提交或重新加载表单。我如何实现这一目标？
回答by Shad
It needs to be onsubmit="return validateForm()"
它需要是 onsubmit="return validateForm()"
回答by Matt King
You can use the onsubmitattribute as suggested, a more unobtrusive way is to use preventDefault()on the event object passed to the function bound to your onsubmitevent:
您可以onsubmit按照建议使用该属性，更隐蔽的方法是preventDefault()在传递给绑定到您的onsubmit事件的函数的事件对象上使用：
function validateForm(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false; // for IE
}
This only works if you bind the event listener to the form, instead of having onsubmitinline.
这仅在您将事件侦听器绑定到表单而不是onsubmit内联时才有效。
Edit: here's how you could bind an event listener to the form, which when triggered will pass an Event object (note this is the W3C style, this won't work in IE, but will give you an idea):
编辑：这是将事件侦听器绑定到表单的方法，该表单在触发时将传递一个 Event 对象（注意这是 W3C 样式，这在 IE 中不起作用，但会给您一个想法）：
var form = document.getElementById('myform');
form.addEventListener('submit', validateForm, false);
When the submitevent is triggered, it will call the validateFormfunction, passing the event object. Here's a really good article on Javascript events:
当submit事件被触发时，它会调用validateForm函数，传递事件对象。这是一篇关于 Javascript 事件的非常好的文章：
回答by Chandu
You should use a return in the onsubmit hanlder of the form. Try this version:
您应该在表单的 onsubmit 处理程序中使用 return。试试这个版本：
<script type="text/javascript">
function validateForm()
{
return false;
}
</script>
<form action="" name="contact" onsubmit="return validateForm();">
<input type="text" name="name" value="Enter Your Name..."/>
<input type="submit" name="submit"/>
回答by Brad Christie
add a return in your event handler:
在您的事件处理程序中添加一个返回：
onsubmit="return validateForm();"
Otherwise the function executed, but doesn't tell the browser to halt processing.
否则函数会执行，但不会告诉浏览器停止处理。
回答by Matt Parrilla
Using jQuery:
使用jQuery：
$('form').on('submit', function() {
// call functions to handle form
return false;
});
Basically the same as the above solutions, but I prefer to keep my JS out of my HTML, even the "onsubmit"attribute.
与上述解决方案基本相同，但我更喜欢将我的 JS 保留在我的 HTML 之外，甚至是"onsubmit"属性。
