停止表单onSubmit而不返回false;'

时间:2014-03-21 00:05:45

标签: javascript html

我正在寻找一种跨浏览器兼容的方式来停止表单提交,而返回false。

例如:

<form action="..." onsubmit="someFunc(this);">
    ...
</form>

<script type="text/javascript">
    function someFunc(form){
        // do stuff to stop form submission without return false
    }
</script>

我没有找到一个好方法,有人知道它是否可能吗?

编辑: 我在form.preventDefault()中尝试了window.event.preventDefault()someFunc()。似乎既不阻止表单在firefox中提交(在mac上)。

解决方案

似乎在FF中没有window.event,而它在Chrome和IE中...因此我之前的尝试无效。我通过在表单提交中调用函数的第一个参数作为事件本身来解决这个问题。然后可以取消。

新表单onsubmit如下所示:onsubmit="someFunc(event, this);"

2 个答案:

答案 0 :(得分:1)

您可以使用event.preventDefault()功能停止提交表单。这是在使用Javascript(带有一些JQuery)提交之前被捕获的表单:

$("form").submit(function(event) { // You can change "form" to whatever ID/class your form has
    event.preventDefault();
}

完成它!我已经在Firefox中对它进行了测试,这肯定有效

这是指向JSFiddle的链接:http://jsfiddle.net/bZx3e/。这是HTML:

<form id="form"><input type="checkbox" id="checkbox"/><label for="checkbox">Checkbox</label>
<input type="button" onclick="check();" value="Submit"/></form>

这是Javascript:

function check(){
    if(document.getElementById("checkbox").checked){
        document.getElementById("form").submit();}
    else{}
}

所以,基本上,如果没有选中复选框,则不执行任何操作,如果是,则提交表单。这样您就可以在提交表单之前进行所有验证。

答案 1 :(得分:1)

每个事件都有一个与之关联的Event对象。在W3C事件模型中,调用event.preventDefaut将阻止发生默认操作。但是,W3C模型中获取对相关事件对象的引用的唯一方法是将其从关联的侦听器传递给函数。对于在线听众:

<form onsubmit="someFunc(event)" ...>

如果使用 addEventListener 附加侦听器,则相关的事件对象将作为第一个参数传递给侦听器函数:

someElement.addEventListener('click', foo, false);

function foo(eventObject) {
  var target = eventObject.target;  // element on which the click occured
  var currentTarget = eventObject.currentTarget; // Element that called the listener
}

但是,OP中的侦听器是内联的,并且不会传递对事件的引用,因此无法在仅支持W3C模型的浏览器中捕获它。

IE事件模型,相关的事件对象可用作窗口对象的属性,因此在函数中你可以做到:

var event = window.event;

但是IE模型不支持 preventDefault ,但确实提供了 returnValue 属性,如果设置为false,则取消默认操作。

因此,不使用return false的最跨浏览器方式是:

<form onsubmit="someFunc(event);" ...>

function someFunc(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

然而,使用 return false 非常简单,因为自NN / IE 2以来,每个浏览器都可靠地支持它。