JavaScript学习14:表单处理
什么是表单?
在HTML中,表单是由<form>元素来表示的。而在JavaScript中,表单相应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素的默认属性,而且还独有自己的属性和方法。
获取表单<form>对象的方法有非常多种,比方:document.getElementById(“表单标签ID”)、document.getElementsByTagName(‘标签名称’)等等。
提交表单
获取了页面表单对象。就要考虑怎样将表单数据提交给后台了。通常的方式是使用submit事件,他的默认行为就是携带数据跳转到指定的页面。
我们能够通过事件对象。来阻止submit的默认行为。
同一时候也能够使用submit()方法来自己定义触发submit事件,也就是说并不一定要点击submitbutton才干进行提交操作。
提交数据最大的问题就是反复提交表单。由于各种原因,当一条数据提交到server的时候会出现延迟等长时间没有响应的情况。导致用户不停的进行提交操作,从而使得反复提交了非常多同样的请求,或者造成错误,或者这写入多条同样的信息,而这都不是我们想看到的。
解决的方法,简单来说有两个:第一就是提交之后,立马禁用点击button;另外一种就是提交之后,进行推断,若已提交过,则取消兴许的表单提交提交操作。
了解了上面的基础知识。我们来看两种经常使用的表单元素:文本框和选择框。
文本框脚本
在HTML中,有两种方式来表现文本框:一种是单行文本框<input type=”text”>,一种是多行文本框<textarea>。尽管<input>在字面上有value值,<textarea>没有,可是我们都能够通过value获取他们的值。至于其它的属性和方法不再赘述,以下看一个比較有意思的东西,过滤输入。
为了使文本框输入指定的字符。我们必需要对输入的字符进行验证。
有一种做法是推断字符是否合法,这是提交后操作的。
那么我们也能够在提交前限制某些字符,这就是过滤输入。看下代的简单实现:
<span style="font-size:18px;">//屏蔽非数字键的输入
addEvent(textField,'keypress',function(evt){
var e=evt||window.event;
var charCode=getCharCode(evt);
if(!/\d/.test(String.fromCharCode(charCode))&&charCode>8){
preDet(evt);
}
});</span>
选择框脚本
选择框是通过<select>和<option>元素创建的,除了通用的一些属性和方法外,HTMLSelectElement类型还提供了例如以下的属性和方法:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
在DOM中。每一个<option>元素都有一个HTMLOptionElement对象,以便訪问数据。这个对象有例如以下一些属性:
选择框有单选和多选之分。对于单选来说,使用selectedIndex属性最为简单。
而对于多选的需求,则使用selected属性更为简单一些。这是推断是否选中,对于选中的button怎样获取它的值,就要使用checked属性了。
代码演示样例就不再写了。由于比較简单,都是基础性的。大家有兴趣实践的能够写写代码实现一下单选和多选的功能。
小结一下:
JS的表单处理远远不止这些,比方表单里面的表格、页面的label等等。都是表单的元素,尤其是datagrid控件。它和后台的数据交互比較重要。我们在做各种管理信息系统的过程中,肯定要大量的使用它,因此还有非常多的东西须要我们去了解和深入学习。
JavaScript学习14:表单处理的更多相关文章
- 9. Javascript学习笔记——表单处理
9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...
- bootstrap基础学习【表单含按钮】(二)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- javascript自动填写表单小技巧
javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...
- JavaScript 小实例 - 表单输入内容检测,对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
- JavaScript高级程序设计学习笔记--表单脚本
提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit" ...
- [html5] 学习笔记-表单新增的元素与属性(续)
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- JavaWeb学习日记----表单提交方式
1.表单提交方式 (1) 使用input控件中的submit提交 代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- JavaScript—异步提交表单的6种方式
FormData的详细介绍及使用请点击此处,那里对FormData的方法和事件已经表述的非常清楚,这里就不再浪费时间在介绍一遍了.本文主要针对FormData对象的使用以及异步文件上传进行详细的说明. ...
- JavaScript学习笔记——对表单的操作
javascript-对表单的操作实例讲解 <form name="myform" id="form1" action="" meth ...
随机推荐
- 小而美的Promise库——promiz源码浅析
背景 在上一篇博客[[译]前端基础知识储备--Promise/A+规范](https://segmentfault.com/a/11...,我们介绍了Promise/A+规范的具体条目.在本文中,我们 ...
- PADS规则设计-对某一网络/元件单独设置规则
转载请注明出处,并附带本文网址https://www.cnblogs.com/brianblog/p/9894867.html, 在PADS规则设计中可能会遇到某个走线与另一个走线之间的间距,普通规则 ...
- 杭电 1596 find the safest road (最小路径变形求最大安全度)
Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每一条路有一个安全系数s,s是在 0 和 1 间的实数(包括0,1),一条从u 到 v 的 ...
- JQuery给元素动态增删类或特性
背景:通过JQuery动态给Html元素增加.删除类或属性,使Html元素在不同的时刻呈现不同的样式,给用户更好的体验感觉. 如存在以下p片段和button按钮,代码如下: <p id=&quo ...
- luogu2633 Count on a tree
主席树放到树上而已 #include <algorithm> #include <iostream> #include <cstdio> using namespa ...
- .net中的协变和逆变
百度:委托中的协变和逆变. 百度:.net中的协变和逆变. 协变是从子类转为父类. 逆变是从父类到子类. 这样理解不一定严谨或者正确.需要具体看代码研究.
- python多线程--优先级队列(Queue)
Python的Queue模块中提供了同步的.线程安全的队列类,包括FIFO(先入先出)队列Queue,LIFO(后入先出)队列LifoQueue,和优先级队列PriorityQueue.这些队列都实现 ...
- 洛谷P2527 [SHOI2001]Panda的烦恼
题目描述 panda是个数学怪人,他非常喜欢研究跟别人相反的事情.最近他正在研究筛法,众所周知,对一个范围内的整数,经过筛法处理以后,剩下的全部都是质数,不过panda对这些不感兴趣,他只对被筛掉 ...
- C语言一些常见的操作字符串方法
// 首字母大写 ;(c=string[i])!='\0';i++) // 字符串碰到\0结束 C知识 { if (c==' ') { printf("%c",c), word=; ...
- middle(bzoj 2653)
Description 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整. 给你一个长度为n的序列s. 回答Q个这样的询问:s的左端点在[a,b ...