js进阶 9-5 js如何确认form的提交和重置按钮
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()提交表单。 。
转载于:https://www.cnblogs.com/Renyi-Fan/p/9157248.html
js进阶 9-5 js如何确认form的提交和重置按钮相关推荐
- js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
- php+提交和重置按钮传值,JS提交和重置form表单
本节示例讲解 JavaScript 的提交 form 表单和重置 form 表单. 提交表单 使用 和 标签都可以定义提交按钮,只要将 type 属性值设置为"submit"即可, ...
- JS进阶篇--ckplayer.js视频播放插件
网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放. 可调用flash也可以调用html5播放器: <div id="a1&q ...
- web前端开发分享js进阶篇
js进阶篇: js进阶,等妙味看的差不多,心里难免痒痒,看老师用尽可能少的代码来实现了众多以前没法实现的动态效果.然后自己想写,但不知道写啥东西,下面就这个问题做以建议,写这些东西的目的有这么几个,一 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- cytoscape.js进阶篇
cytoscape.js进阶篇 系列文章 前言 cytoscape依赖引用 cytoscape扩展依赖引用 升级Cytoscape组件 扩展Cytoscape组件模板容器 扩展Cytoscape组件方 ...
- 自学JavaScript第四天- JS 进阶:AJAX Promise Canvas
自学JavaScript第四天- JS 进阶:AJAX Promise Canvas AJAX 使用 XMLHttpRequest 使用 fetch() 方法 处理 AJAX 数据 安全限制 跨域方案 ...
- js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr)...
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js进阶 9-14 js如何实现下拉列表多选移除
js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...
最新文章
- 不是说好一起长大的吗?
- Eclipse External Tool Configration Notepad++
- pc显示器分辨率 前端_2020电竞显示器推荐
- 【华为云技术分享】40多元成本制作基于Arduin的随动四轴机械臂,机械臂实现步骤记录、复现等功能
- python生物数据分析师职业技能_数据分析师需要什么技能,数据分析行业都有什么职业?...
- SpringAOP 通知(adivce)- methodIntercepor
- 教你大数据必修三大技能 快快记录下来
- java线上编译器菜鸟_[Java教程]菜鸟成长记
- Python天气查询系统(连接数据库版)
- 量化交易入门,看这篇就够了
- 第三次个人作业—“K米”评测
- Windows 10 无法访问共享的解决办法大全
- 带CAN唤醒能力的TJA1043
- 机器视觉:高动态范围图像
- 利用pyboardCN V2播放Bad apple
- 就dsaf就打开了撒酒疯
- 离阿里最近的机会,来了
- V2X和D2D的链路级sidelink上的区别
- 旅游攻略app开发定制
- ExternalException (0x80004005): 无法执行程序
热门文章
- Java反编译器Java Decompiler
- 新闻网大数据实时分析可视化系统项目——7、Kafka分布式集群部署
- 点云赋值 PointCloudT::Ptr 运行时崩溃
- 深度工作:充分使用每一份脑力
- windows+caffe(三)——求取图片的均值
- linux下面安装maven
- 浅述WinForm多线程编程与Control.Invoke的应用
- 树莓派内核开发准备(内核源码获取、启动过程、源码目录树)
- 树莓派外设开发基础(wiringPi库)
- java 内存和实际内存_请问更改eclipse内存和更改jvm内存是一会事儿吗?