javascript form提交 不执行onsubmit事件解决方案

时间:2021-05-24 08:49:02

转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html

今天做项目过程中,需要用到javascript提交form到后台,同时我也需要在提交后台之前执行onsubmit事件。

弄了半天也没有解决,然后无意中调试出来了。然后分析源码,现在把解决方案公布出来,给大家一个参考。

核心javascript原理如下

<script type="text/javascript">
//<![CDATA[
$(function(){
//这个不起作用
//$("form:first").attr("onsubmit","alert(123);return true;");
$("form:first").bind("onsubmit",function()
{
alert(123);
return true;
});
});
function test(){
alert(456);
return true;
}
function doSubmit() {
var theForm = $("form:first").get(0);
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.submit();
}
}
//]]>
</script>

关键在这行代码if (!theForm.onsubmit || (theForm.onsubmit() != false))

在提交之前会去检查是否有onsubmit属性,如果没有!theForm.onsubmit为true直接可以执行

theForm.submit();语句。

假如有onsubmit属性那么theForm.onsubmit对应的则是函数体,()表示执行。

当前的theForm.onsubmit函数是test注意test函数的返回值需为true,或者不加返回值,不能返回false,当然如果一定要返回false修改相应的即可。

注意必须把onsubmit直接写在form标签内,不可以通过事件绑定。

这个方法个人认为还是很巧妙的。先公布给大家。