js进阶 9-5 js如何确认form的提交和重置按钮
一、总结
一句话总结:
1、这个并不好做:onsubmit 里面的代码必须返回false才能取消onsubmit方法的执行,所以,有return。注意:一般的调用肯定是没有return的。onsubmit="return queren()"
2、onsubmit="return queren()" 这句话的意思的form的submit方法调用return queren() 这段代码。这里可以是个函数,也可以是一段代码,可以有返回值,也可以没有,一般是没有。
3、上述给了我们明白onsubmit对象事件句柄等方法的实质:onsubmit方法是调用了这段js代码再执行的,如果这段js代码没有返回值,先执行这段代码,然后执行onsubmit,如果这段代码的返回值是false,那么onsubmit方法不再执行,说到底就是就是onsubmit调用这一段代码,像调用函数一样,如果得到的返回值是true,就执行,否则不执行。默认返回值是true。
1、注意:
1、这里是两级return的形式。
1、form表单中提交button的两种实现方式?
解答:button:submit input:submit。
2、form表单中,如何实现确认form的提交和重置按钮?
解答:两级return。
3、form表单中,onsubmit 在提交表单之前调用 的官方名称是什么?
解答:对象事件句柄。
4、form表单中,对象事件句柄有哪两个?
解答:onreset 在重置表单元素之前调用。 onsubmit 在提交表单之前调用。 。
5、form表单中,Form 对象方法有哪些?
解答: reset()把表单的所有输入元素重置为它们的默认值。 Submit()提交表单。 。
二、知识点
Form 对象方法
- reset()把表单的所有输入元素重置为它们的默认值。
- Submit()提交表单。
Form 对象事件句柄
- onreset 在重置表单元素之前调用。
- onsubmit 在提交表单之前调用。
三、实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <style type="text/css"> 7 </style> 8 </head> 9 <body> 10 <form id="form1" name="myform1" action="#" method="get" onsubmit="return queren()" onreset="return qingchu()"> 11 <p>昵称:<input type="text" name="username"></p> 12 <p>密码:<input type="password" name="password"></p> 13 <p> 14 <input type="submit" value="提交"> 15 <input type="reset" value="重置"> 16 </p> 17 </form> 18 <script type="text/javascript"> 19 // if (confirm('【确定】或【取消】')) { 20 // alert('您点击了确定') 21 // }else{ 22 // alert('您点击了取消') 23 // } 24 function queren(){ 25 return confirm('请确认无误后再点击【确定】按钮') 26 } 27 28 function qingchu(){ 29 return confirm('确定要清除之前填写的内容吗?') 30 } 31 </script> 32 </body> 33 </html>
四、onsubmit 事件
定义和用法
onsubmit 事件会在表单中的确认按钮被点击时发生。
语法
οnsubmit="SomeJavaScriptCode"
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
支持该事件的 HTML 标签:
<form>
支持该事件的 JavaScript 对象:
form
实例
在本例中,当用户点击提交按钮时,会显示一个对话框:
<form name="testform" action="jsref_onsubmit.asp"
onsubmit="alert('Hello ' + testform.fname.value +'!')"
>
What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
五、测试题-简答题
1、form表单中提交button的两种实现方式?
解答:button:submit input:submit。
2、form表单中,如何实现确认form的提交和重置按钮?
解答:两级return。
3、form表单中,onsubmit 在提交表单之前调用 的官方名称是什么?
解答:对象事件句柄。
4、form表单中,对象事件句柄有哪两个?
解答:onreset 在重置表单元素之前调用。 onsubmit 在提交表单之前调用。 。
5、form表单中,Form 对象方法有哪些?
解答: reset()把表单的所有输入元素重置为它们的默认值。 Submit()提交表单。 。