前言

 首先需要清楚的是,表单传数据方式,有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)的更多相关文章

  1. form表单js提交

    form表单js提交      $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...

  2. jsp-提交表单时,select的值无法传递

    属性为"disabled",提交表单时,select的值无法传递,移除disabled属性,<input name="id" type="tex ...

  3. PHP.TP框架下商品项目的优化4-优化商品添加表单js

    优化商品添加表单js 思路 1.制作五个按钮 2.下面五个table 3.全部隐藏,点击则显示 4.点击第几个按钮就显示第几个table 具体操作 1.添加按钮 2.添加五个table并添加class ...

  4. Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

  5. FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...

  6. 表单提交:button input submit 的区别

    http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践 ...

  7. [转]表单提交:button input submit 的区别

    博客转自于   http://harttle.com/2015/08/03/form-submit.html  ,同时自己做了稍微改动 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整 ...

  8. js提交表单错误:document.form.submit() is not a function

    今天在写JS时,遇上这么个错误:"document.form.submit() is not a function",经过一番搜索,最终找到了修复方法. 这个错误一般是由于表单&l ...

  9. layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法

    ayui使用官方的表单模块form.on('submit(sub)',function (){}) 提交,使用ajax请求向后台请求一个执行结果,根据结果进行处理,出现回调无法执行,并且页面出现了刷新 ...

随机推荐

  1. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  2. hdu 5066 Harry And Physical Teacher(Bestcoder Round #14)

    Harry And Physical Teacher Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  3. hdu More is better

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1856 题意:王老师要找一些男生帮助他完成一项工程.要求最后挑选出的男生之间都是朋友关系,可以说直接的, ...

  4. Repository模式

    Repository模式的两种写法与疑惑 现如今DDD越来越流行,园子里漫天都是介绍关于它的文章.说到DDD就不能不提Repository模式了,有的地方也叫它仓储模式. 很多时候我们对Reposit ...

  5. codeigniter 操作mysql的PHP代码--更新

    支持标准前缀 1)查询没有平等,有平等的 $this->db->get_where('host',array('host'=>'ddd','id !='=>0))->ro ...

  6. 【从翻译mos文章】oracle linux 和外部存储系统 关系

    oracle  linux 和外部存储系统 关系 参考原始: Oracle Linux and External Storage Systems (Doc ID 753050.1) 范围: Linux ...

  7. 基于Qt语音识别功能

    基于在最近的研究Qt语音识别平台下.在此记录12 首先,语音识别做三件事 1.记录用户的语音文件到本地 2.将用户语音编码 使用flac或者speex进行编码 3.使用第三方语音识别API或者SDK进 ...

  8. 第一个JavaWeb程序

    转载 第一个JavaWeb程序 JavaWeb学习总结第二篇—第一个JavaWeb程序 最近我在学院工作室学习并加入到研究生的项目中,在学长学姐的带领下,进入项目实践中,为该项目实现一个框架(用已有框 ...

  9. centos 7安装mysql5.5

    首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb,以下为卸载mariadb,安 ...

  10. bluetooth发展(五岁以下儿童)------蓝牙功能测试(一个)

    newton板已出版.下面再组织我调试的一小方面,,蓝牙功能的实现和测试: 转载请注明出处:http://blog.csdn.net/wang_zheng_kai 以下是我写的newton开发板中bl ...