应该熟知的表单js应用(select、label、submit)
前言
首先需要清楚的是,表单传数据方式,有POST和GET的方式,通过name和对应的value值提交到后台。通过name,可以用对象属性调用的方式获取对应的input标签,如:
document.formName.iptName.iptVal //获取input的value值
<input type=”hidden” name=”xxx” value=”xxx” /> //隐藏的参数可以这样提交
一,SELECT
1、基本属性和方法
//select
select.options // 获取所有option
select.value //选中的option的value
select.selectedIndex //选中的option的序号
select.options.add(new Option(text,value)) //增加option
select.options.remove(i) //移除i序号的option //option
options[select.selectedIndex] //当前选中的option
options[?].value/.text //option的value属性和对应的文本值
options[?].selected = true //选中当前option
options[?] = null //删除当前option
2、select事件
select.onchange = func; //改变下拉框选项时触发
二,LABEL
1,根据label的for属性指向input的id,实现点击文字选中
//设置相同的name则只能选一个,for指向对应的id,这样点击文字可以选择对应的input
<input type="radio" name="hehe" id="a" value="" />
<label for="a">one</label> <input type="radio" name="hehe" id="b" value="" />
<label for="b">two</label>
2,把input写在label里边,点击文字也会选中
//input写label里边,点击文字可选中,注意for要去掉
<label><input type="radio" name="hehe" value="" />one</label>
<label><input type="radio" name="hehe" value="" />two</label>
注意:radio和check事件选中调用 onclick比较好,onchange在ie6/7/8会有先获取焦点的不兼容的解析。
还是写写好了:
ie6、7、8在onchange事件中点击不会直接选中,需要点击两次,解决方法是:
A、通过绑定input的onclick = “this.blur()”;
B、通过触发input的onclick代替onchange选中(通过label事件可以触发对应的input事件);
三,SUBMIT
1,input submit触发
//提交前调用的事件,return false则不提交
document.formName.onsubmit = func;
2,button 或 其他点击 submit触发
//一般的button表示
<input type="button" value="点击我" name="btn" /> //更实用的button,可以放置文字,图片等,此处的type属性不要去掉,因为button不同浏览器的默认type不一样。
<button type="button" name="btn">点击我</botton> //button的提交,注意这个submit()不会触发onsubmit事件
document.formName.btn.onclick = function(){
document.formName.submit();
}
——个人实践总结下来的一篇小博客
应该熟知的表单js应用(select、label、submit)的更多相关文章
- form表单js提交
form表单js提交 $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...
- jsp-提交表单时,select的值无法传递
属性为"disabled",提交表单时,select的值无法传递,移除disabled属性,<input name="id" type="tex ...
- PHP.TP框架下商品项目的优化4-优化商品添加表单js
优化商品添加表单js 思路 1.制作五个按钮 2.下面五个table 3.全部隐藏,点击则显示 4.点击第几个按钮就显示第几个table 具体操作 1.添加按钮 2.添加五个table并添加class ...
- Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
- FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别
在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...
- 表单提交:button input submit 的区别
http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践 ...
- [转]表单提交:button input submit 的区别
博客转自于 http://harttle.com/2015/08/03/form-submit.html ,同时自己做了稍微改动 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整 ...
- js提交表单错误:document.form.submit() is not a function
今天在写JS时,遇上这么个错误:"document.form.submit() is not a function",经过一番搜索,最终找到了修复方法. 这个错误一般是由于表单&l ...
- layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法
ayui使用官方的表单模块form.on('submit(sub)',function (){}) 提交,使用ajax请求向后台请求一个执行结果,根据结果进行处理,出现回调无法执行,并且页面出现了刷新 ...
随机推荐
- Nyoj 修路方案(次小生成树)
描述 南将军率领着许多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N,由于交通不太便利,南将军准备修路. 现在已经知道哪些城市之间可以修路,如果修路,花费是多少. 现在,军师小工已经找到 ...
- 转让lua性能executeGlobalFunction
没有其他的,搞搞cocos2dx的lua文字,话lua这件事情在几年前学过一段时间.还曾对自己c++介面,我已经做了一些小东西.只是时间的流逝,模糊记忆. 拿起点功夫和成本.下面是我的一些经验. co ...
- C#操作Xml:linq to xml操作XML
LINQ to XML提供了更方便的读写xml方式.前几篇文章的评论中总有朋友提,你为啥不用linq to xml?现在到时候了,linq to xml出场了. .Net中的System.Xml.Li ...
- crm操作安全角色
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using System.Co ...
- TCP连接状态
TCP 连接状态按 TCP 协议的标准表示法, TCP 可具有如下几种状态,为讨论方便,如下讨论中区分服务端和客户端,实际软件处理上对二者一视同仁. CLOSED关闭状态.在两个通信端使用“三路握手” ...
- 关于Android开发中导出jar包后的资源使用问题解决
我们经常遇到一个需求,就是给别人使用我们工程的时候,为了能够屏蔽代码,把代码封装成jar包提供给第三方使用,但是这样我们的资源文件怎么给对方用呢? 其实并不用这么的复杂,下面就介绍一下具体的方法 一, ...
- Linux下tomcat管理查看控制台|杀死tomcat进程
查看控制台 # tail -f catalina.out 脚本执行权限chmod u+x *.sh #看是否已经有tomcat在运行了 ps -ef |grep tomcat #如果有,用kill; ...
- Object-C中Category类体验
Object-C中Category类体验 Object-C开发的时候有的时候会用到Category类,类似于Java和C#中扩展类,就是如果你觉得如果你觉得常用的方法在String中没有,可以根据业务 ...
- asp.net读取CSV
原文:asp.net读取CSV 用Excel导了两天数据,各种问题,折磨客户也折磨了自己,以前没发现的问题一下子都暴露出来了 特意收集两篇Excel跟CSV读取相关的两篇文章 asp.net读取exc ...
- 快速构建Windows 8风格应用35-触控输入
原文:快速构建Windows 8风格应用35-触控输入 引用 Windows 8设备通常具有多点触摸屏,用户可以同时使用多个手指来进行不同的输入交互,如点击.拖动或收缩等手势操作.另外Windows ...