前言

 首先需要清楚的是,表单传数据方式,有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. Oracle 数据库 有用的sql语句

    ; SELECT to_date('2014-12-01', 'yyyy-mm-dd') + numtodsinterval(rownum , 'day') FROM DUAL CONNECT BY ...

  2. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  3. 如何使用 RMAN 异构恢复一些表空间

    在oracle 在日常维护的数据库中难免会遇到误删数据和使用(drop.delete. truncate)当我们使用常规手段(flashback query .flashback drop)当数据不能 ...

  4. Cocos2d-x 3.0final 终结者系列教程14-L新abel-Cocos2d-x公文

    目 录 新文本标签类Label 其它文本标签 字体制作工具使用介绍 小结 https://github.com/chukong/cocos-docs/blob/master/manual/framew ...

  5. Android Application.java以及它的作用

    What is Application Application和Activity,Service一样是android框架的一个系统组件,当android程序启动时系统会创建一个 application ...

  6. Swift中文教程(一)--欢迎来到Swift的世界

    原文:Swift中文教程(一)--欢迎来到Swift的世界 Apple凌晨时在WWDC发布了Swift编程语言,语法简介我很喜欢,市面上没有完整的中文教程,我在ibooks里面下载了英文原版,现在开始 ...

  7. C++学习笔记32 断言函数

    首先,让我们来看看百度百科上"断言函数"定义说明: 1定义fr=aladdin#" class="nslog:1019" title="编辑 ...

  8. Swift # 柯里化函数

    前言 此次文章,讲述的是Swift的一个新特性(柯里化函数),可能很多iOS开发人员是第一次听这个词汇,包括我自己也是,自己也用了几天时间才总结出来,希望能帮助到各位咯,个人感觉偏向有开发经验的码友, ...

  9. [CLR via C#]1.4 执行程序集的代码

    原文:[CLR via C#]1.4 执行程序集的代码 1. 托管程序集同时包含元数据和IL.IL是与CPU无关的机器语言.可将IL是为一种面向对象的机器语言. 2. IL也是能使用汇编语言来写的,M ...

  10. 修改vim/terminal配色

    http://blog.csdn.net/angle_birds/article/details/11694325