js如何遍历表单所有控件

一、总结

一句话总结：

1、获取form表单里面的的所有元素：通过formelement.elements，这里form元素通过name属性直接定位

var fele=form01.elements;

2、循环遍历获取特定的元素：通过elements[i]的形式

var e=fele[i];

前两步即可遍历表单所有控件

3、判断一个控件的类型是不是type：通过element.type

if (e.type=='submit') {

二、js如何遍历表单所有控件

1、案例截图

2、案例代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     /*    input{background: green}

         input[type=submit]{

             background: orange

         }*/

     </style>

 </head>

 <body>

     <form action="#" method="post" name="form01">

         <p>昵称：<input type="text" name="username"></p>

         <p>密码：<input type="password" name="password"></p>

         <p><input type="submit" value="提交"></p>

     </form>

     <script type="text/javascript">

         function getFele(){

             var fele=form01.elements;

             // alert(fele.length)

             for(var i=0;i<fele.length;i++){

                 var e=fele[i];

                 if (e.type=='submit') {

                     e.style.background='orange'

                 }else{

                     e.style.background='green'

                 }

             }

         }

         getFele()

     </script>

 </body>

 </html>

js如何遍历表单所有控件的更多相关文章

  1. 使用jquery.validate.js插件进行表单里控件的验证

    jsp中具体实现的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  2. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  3. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法，日期转换和前台显示格式之间，还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  6. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  7. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  8. SNF开发平台WinForm-表单验证控件-通用

    CS程序也能做到像BS程序一样的验证效果,如下: 1.验证控件的展示 校验时如果不符合验证条件的控件,会在控件上显示较显眼的图标. 当出现不符合验证的控件时,鼠标悬浮会显示自定义的提示信息. 如:输入 ...

  9. JS获取填报扩展单元格控件的值

    1. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...

随机推荐

  1. Activity启动过程源代码分析

    事实上写分析源代码文章总会显得非常复杂非常乏味,可是梳理自己看源代码时的一些总结也是一种提高. 这篇博客分析下Activity启动过程源代码,我会尽量说得简单点. 个人的观点是看源代码不能看得太细,否 ...

  2. Linux下读写寄存器

    arm裸机下读写寄存器很容易,各个寄存器和内存的地址是单一地址空间,他们是用相同的指令进行读写操作的.而在linux下就要复杂很多,因为linux支持多个体系架构的CPU.比如arm和x86就不一样, ...

  3. 【2017 Multi-University Training Contest - Team 10】Schedule

    [链接]http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1010&cid=767 [题意] 给一些区间,每台机器在这些区间 ...

  4. 使用Struts2和jQuery EasyUI实现简单CRUD系统（七）——数据分页处理

    上篇完毕多选删除的功能之后,接下来就是做分页功能了.曾经的分页是一个麻烦的问题.并且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的. watermark/2/tex ...

  5. Dcloud课程7 单例模式一般用在什么场景

    Dcloud课程7 单例模式一般用在什么场景 一.总结 一句话总结:连接数据库,这样就保证了和数据之间只有一个连接,从而能够不占用多余资源,这样就极大的减少了资源浪费,减少了mysql或者说服务器压力 ...

  6. 软件——机器学习与Python，聚类，K——means

    K-means是一种聚类算法: 这里运用k-means进行31个城市的分类 城市的数据保存在city.txt文件中,内容如下: BJ,2959.19,730.79,749.41,513.34,467. ...

  7. css函数——calc()和attr()

    css也有函数?好吧,我孤陋寡闻了.这里记录一下学习情况. calc()函数 定义:用于动态计算长度值 支持版本:css3 运算符前后都需要保留一个空格,例如:width: calc(100% - 1 ...

  8. js里的表格数组某个key去重

    如Elemgnt的table绑定的数据要某个key是唯一的 var myarry = [ {name: 'liuyang',age :13}, {name:'jike',age:15}, {name: ...

  9. （转）iptables常用规则：屏蔽IP地址、禁用ping、协议设置、NAT与转发、负载平衡、自定义链

    转自:http://lesca.me/archives/iptables-examples.html 本文介绍25个常用的iptables用法.如果你对iptables还不甚了解,可以参考上一篇ipt ...

  10. python3 pygame 坦克自动移动

    让坦克自动跑起来 这里需要一个坦克的图. 放到与脚本同一目录. 好,我们就让这个坦克自动跑. 下面上代码: # !/usr/bin/env python # -*- coding:utf-8 -*- ...