当前位置: 代码迷 >> Web前端 >> form表单的onsubmit()有关问题 集合
  详细解决方案

form表单的onsubmit()有关问题 集合

热度:451   发布时间:2012-09-15 19:09:29.0
form表单的onsubmit()问题 集合

以前在项目中为一个表单(from)编写onsubmit()脚本的时候,经常需要验证表单中数据的合法性,所以常会写道:<form action="/admin/addUser.do" method="post" onsubmit="validateForm();">,试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单?还是会提交。后来发现 onsubmit="return validateForm()"就没有问题了,当时也没有多想就继续做其它事情了。

???? 直到今天看到一篇文章作了清楚的解释:

?

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

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

?

?

java代码:?

?

<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按钮该表单是否提交?

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

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

?

?

java代码:?

?

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

?

?

?

改为

?

?

java代码:?

?

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

?

?

?

为何?

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

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

?

?

java代码:?

?

onsubmit="

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

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

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

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

? ? return false;

"

?

?

?

就相当于

?

?

java代码:?

?

Form.prototype.onsubmit = function() {

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

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

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

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

? ? return false;

};

?

?

?

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

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

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

?

?

java代码:?

?

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

?

?

?

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

?

?

java代码:?

?

Form.prototype.onsubmit = function() {

? ? submitTest();

};

?

?

?

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

?

?

java代码:?

?

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

?

?

?

override方法的效果为:

?

?

java代码:?

?

Form.prototype.onsubmit = function() {

? ? return submitTest();

};

?

?

?

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

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

结论:

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

?

?

java代码:?

?

Form.prototype.onsubmit = function() {?

};

?

?

?

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


submit()和onsubmit()的区别

最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,
在提交前触发这个button的onclick事件,在其事件中触发form的submit事件。问题出现了:
以下是出现相关代码:

  1. <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;">??
  2. ????<table?align="center"?width="420px"?cellPadding="2"?cellSpacing="1"?bgcolor="#A4B6D7"????style="word-wrap:Break-word;">?????????????????
  3. ????????<tr?style="cursor:?hand;background:#d7e3f6"?>??
  4. ????????????<td?width="20%"?align="right">条型码</td>??
  5. ????????????<td><input?style="width:90%"?type="text"?name="GOODSNUM"???size="30"??maxlength="8"?></td>??
  6. ????????</tr>??
  7. ????????<tr>??
  8. ????????????<td?align="center"?colspan="2">??
  9. ????????????????<input?type="button"?name="save"?value="保存"?onclick="if((confirm('确定要提交吗?')))?this.form.submit();"/>??
  10. ????????????</td>??
  11. ????????</tr>???
  12. ????</table>??
  13. </form>??


却发现并没有触发form的onsubmit方法,而是直接提交了。奇怪了,难道没有这种方式无法结合form的onsubmit方法吗?
仔细想了想,既然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(); //调用form的onsubmit方法
this.form.fireEvent('onsubmit'); //同上,
???? PS:又学到了fireEvent这个方法,

?

2.onsubmit()与submit() :

<sCript>
funCtion fun()
{
?? alert("form_submit");
}
</sCript>

<form onsubmit="fun()">
<input type="submit" id="aaa" value="submit">?? <!--能弹出form_submit-->
<input type="button" id="bbb" value="onCliCk_submit" onCliCk="doCument.forms[0].submit()">
<!--?
表单会提交,但是不会运行fun() 原因是 onsubmit事件不能通过此种方式触发(在IE环境)
直接用脚本doCumetn.formName.submit()提交表单是不会触发表单的onsubmit()事件的
-->
??? <input type="button" id="bb1" value="onCliCk_onsubmit" onCliCk="doCument.forms[0].onsubmit()">

<!--会触发fun()参数-->
</form>

  相关解决方案