【js与jquery】html中onsubmit事件的用法
来源:互联网 发布:光启骗局知乎 编辑:程序博客网 时间:2024/04/29 02:46
onsubmit可以理解为一个函数的名称,而onsubmit等号右边的字符串可以理解为一个函数体,在web开发中,onsubmit函数要求必须有返回值:如果返回值为true,则代表允许提交表单;如果返回值为false,则代表不允许提交表单,如果你的表单提交有问题,则需要查看onsubmit=“” 等号右边引号中返回的值是false还是true
众所周知,在表单中加上onsubmit="return false;"可以阻止表单提交。
如下代码能够正常提交表单:<form action="index.php" method="post" onsubmit="submitTest();"> <input type="text" name="username" value="" /> <input type="submit" name="sub" value="submit" /> </form> <script language="JavaScript"> function submitTest() { // 一些逻辑判断 return false; } </script>
原因:onSubmit事件必须是需要返回值的,而上面代码没有返回值;若想它不提交,应该将
<form action="index.php" method="post" onsubmit="submitTest();"> 改为<form action="index.php" method="post" onsubmit="return submitTest();">
为何?原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;
和php一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,如
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.php" method="post" onsubmit="submitTest();">
override方法的效果为:
Form.prototype.onsubmit = function() { submitTest(); };
在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而
<form action="index.php" method="post" onsubmit="return submitTest();">
override方法的效果为:
Form.prototype.onsubmit = function() { return submitTest(); };
这样,我们利用到了它的返回值,达到了预期效果。
也可以通过如下php代码来理解一下:
<?phpfunction test(){return 1;//test函数,返回1}echo test();//结果:1function test1(){test2();//test1函数调用test2函数,test2函数会返回2,但只是返回给了test1函数体}function test2(){return 2;//test2函数,返回2}echo test1();//结果:空,为什么?因为test1调用test2函数,test2函数返回数字2到test1函数体,而test1并没有将test2函数返回的结果进行处理?>
- 【js与jquery】html中onsubmit事件的用法
- html(js)中事件onsubmit。数据提交…
- js中 onclick与onsubmit的区别
- js form表单onsubmit事件用法详解
- js submit方法与onsubmit事件
- HTML onsubmit 事件属性
- 【HTML/CSS】 JS中form表单中的onsubmit监听返回 true或者false用法
- js设置form的onsubmit事件
- js设置form的onsubmit事件
- js设置form的onsubmit事件
- html:form onsubmit 用法
- 【onsubmit】Form表单onsubmit事件用法详解
- html form中onsubmit的使用
- html form中onsubmit的使用
- html form中onsubmit的使用
- form的submit与onsubmit的用法
- submit与onsubmit 的用法和区别
- js中form的onsubmit不管用
- apache反向代理tomcat多域名安装部署
- xpath
- 循环链表与约瑟夫问题
- 计算机研究方向
- linux命令缩写
- 【js与jquery】html中onsubmit事件的用法
- 有javascript验证日期的有效性,两个日期的大小比较
- 邂逅在华灯初上
- 好资源
- dll入门demo。
- SQL语句游标
- adb问题
- Oracle_PL-SQL_10
- Core Image Filter Reference