当前位置: 代码迷 >> Web前端 >> submit跟onsubmit的区别
  详细解决方案

submit跟onsubmit的区别

热度:295   发布时间:2012-10-24 14:15:58.0
submit和onsubmit的区别

由表单中onsubmit="return false;"想到的

众所周知,在表单中加上onsubmit="return false;"可以阻止表单提交。

下面是简单的一小段代码:

代码

 <form action="index.jsp" method="post" onsubmit="submitTest();">
 
    <INPUT value="www">
 
    <input type="submit" value="submit">
 
</form>
 
 
<SCRIPT LANGUAGE="JavaScript">
 
<!--
 
    function submitTest() {
 
        // 一些逻辑判断
 
     return false;
 
    }
 
//-->
 
</SCRIPT>
?

?

?

大家判断像上面的写法,点击submit按钮该表单是否提交?

?

若答案为是,就不用往下看了。

若答案为否,错了。实际情况是表单正常提交,若想它不提交,应该将

代码

?<form action="index.jsp" method="post" onsubmit="submitTest();">

改为

代码

?<form action="index.jsp" method="post" onsubmit="return submitTest();">

?

为何?

原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true

Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,如

代码

?onsubmit="

?

??? alert('haha'); // 内置函数

?

??? submitTest();? // 自定义函数

?

??? alert(this.tagName); // 用到了this关键词

?

??? ......(任意多条语句)

?

??? return false;

?

"

?

就相当于

代码

?Form.prototype.onsubmit = function() {

?

??? alert('haha'); // 内置函数

?

??? submitTest();? // 自定义函数

?

??? alert(this.tagName); // 用到了this关键词

?

??? ......(任意多条语句)

?

??? return false;

?

};

?

这样的话你就覆写了(override)其默认方法(默认返回true

大家注意到方法体中可以用this这个关键词,这里即代表了<form>的对象实例。

?

经过这样的分析后,以上情况就不难理解了:

代码

?<form action="index.jsp" method="post" onsubmit="submitTest();">

这样写,override方法的效果为:

代码

?Form.prototype.onsubmit = function() {

?

??? submitTest();

?

};

?

在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而

代码

?<form action="index.jsp" method="post" onsubmit="return submitTest();">

?

override方法的效果为:

代码

?Form.prototype.onsubmit = function() {

?

??? return submitTest();

?

};

?

这样,我们利用到了它的返回值,达到了预期效果。

这样理解的话我想印象会深刻得多,就不易出错了

?

结论:

我们可以用Java里的思维方式来思考模拟JavaScript中的类似情况(JavaScript中基于prototype的面向对象技术也确实是这样做的),但他们毕竟还是有本质上的区别,如Java是强类型的,有严格的语法限制,而JavaScript是松散型的。象上述方法:

代码

?

Form.prototype.onsubmit = function() {

?

};

?

既可以有返回值,又可以没有返回值,在Java里是通不过的,毕竟Java里面不能靠方法的返回值不同来重载(overload)方法,而JavaScript中的重载要松散得多。

?

?

submit()onsubmit()的区别

最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,

在提交前触发这个buttononclick事件,在其事件中触发formsubmit事件。问题出现了:

以下是出现相关代码:

<form action="http://www.baidu.com/s?wd=this.form.submit%28%29%3B&cl=3" method="post" name="form1" onsubmit="return alert('已提交!'); return false;">
         <table align="center" width="420px" cellPadding="2" cellSpacing="1" bgcolor="#A4B6D7"       style="word-wrap:Break-word;">                                    
                   <tr style="cursor: hand;background:#d7e3f6" >
                            <td width="20%" align="right">条型码</td>
                            <td><input style="width:90%" type="text" name="GOODSNUM"   size="30"  maxlength="8" ></td>
                   </tr>
                   <tr>
                            <td align="center" colspan="2">
                                     <input type="button" name="save" value="保存" onclick="if((confirm('确定要提交吗?'))) this.form.submit();"/>
                            </td>
                   </tr>        
         </table>
</form>
?

?

却发现并没有触发formonsubmit方法,而是直接提交了。奇怪了,难道没有这种方式无法结合formonsubmit方法吗?

仔细想了想,既然this.form表示form这个对象,那么肯定能获取到form的属性和方法的

,就改成this.form.onsubmit();?? 成功!

我又查了查手册,原来submit的方法是这样解释的:

? The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft? Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.

?

意思是说submit这个方法是不触发onsubmit时间的,如果想要触发它,需要调用

fireEvent方法。尝试一下:this.form.fireEvent('onsubmit');哈哈,果然也成功!不过这样不是多此一举吗?呵呵!

?

就这个小问题也搞了我将近一个小时,不过为了以后不为这个问题烦恼,这也是值得的。

this.form.submit(); //直接提交表单

this.form.onsubmit(); //调用formonsubmit方法

this.form.fireEvent('onsubmit'); //同上,

???? PS:又学到了fireEvent这个方法,?

?

JS中的submit()onsubmit的一点使用体会

?

在写这个日志之前,表单的验证我一直用的是onsubmit的方式,都是用默认的inputtype=submit的方式。

?

以前一直奇怪,为什么用图片代替这个的时候,onsubmit中验证执行了,但是却丢失了返回值,也就是说:无论验证的结果的正确与否,结构都是提交表单,这样一来,onsubmit的事件本省的效果就没有体现出来,我认为,他的意义在于,在表单提交的时候,对表单进行一系列的操作,如果不能返回函数值。那就不论干不干活都给工钱一样,很不合理!

?

是在不解,在小秦的解说下,似懂非懂,大概摸清了一点头绪。

其实在dhtml中就有submitonsubmit的解释的,onsubmit就是针对type=submit而设置的,换句话说,如果用脚本实现submit事件,就要换种方式,比如:用于检测的函数是 imfei(frm),那么脚本就应该这么写:

onclick="return imfei('document.getElementById(d)')"

而不是

?onclick="document.getElementById('d').submit()"

原因是一个是提交中,一个即将提交。

?

PS:貌似input 的类型为image第时候默认就是和submit一样的效果

?

  相关解决方案