Question

当用户提交表单时，我想停止表单的默认行为。即它不应该重新加载。这样我就可以执行AJAX请求。

这是我使用的代码。

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

这不会阻止表单被提交或重新加载。我怎么做到这一点？

Answer 1

需要onsubmit="return validateForm()"

Answer 2

您可以按建议使用onsubmit属性，更为不引人注目的方法是在传递给绑定到preventDefault()事件的函数的事件对象上使用onsubmit：

function validateForm(e) {
    if (e.preventDefault) {
       e.preventDefault();
    }
    e.returnValue = false; // for IE
}

这仅适用于将事件侦听器绑定到表单，而不是内联onsubmit。

编辑：这里是你如何将一个事件监听器绑定到窗体上，触发时会传递一个Event对象（注意这是W3C样式，这在IE中不起作用，但会给你一个想法）：< / p>

var form = document.getElementById('myform');
form.addEventListener('submit', validateForm, false);

当触发submit事件时，它将调用validateForm函数，传递事件对象。这是关于Javascript事件的非常好的文章：

http://www.quirksmode.org/js/introevents.html

Answer 3

您应该在表单的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"/>

Answer 4

在事件处理程序中添加一个返回值：

onsubmit="return validateForm();"

否则执行该功能，但不会告诉浏览器停止处理。

Answer 5

使用jQuery：

$('form').on('submit', function() {
  // call functions to handle form
  return false;
});

基本上与上述解决方案相同，但我更喜欢将我的JS保留在HTML之外，甚至是"onsubmit"属性。

如何使用Javascript停止重新加载表单？

5 个答案: