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. 学习笔记（一）：offset

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  2. 关于python的序列和矩阵运算的写法

    #其实下面是这样一个函数,传入的是obj_value,传出的是newobj_value.,, #这里的obj_value实际上是一个序列... for z in obj_value:          ...

  3. 1.1selenium 介绍

    1.1selenium 介绍selenium 是一个 web 的自动化测试工具,不少学习功能自动化的同学开始首选 selenium , 相因为它相比 QTP 有诸多有点:* 免费,也不用再为破解 QT ...

  4. 【Codeforces Round #450 (Div. 2) A】Find Extra One

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. 看看Y左边或右边的点个数是否<=1 [代码] #include <bits/stdc++.h> using ...

  5. Java Web学习总结（15）——JSP指令

    一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...

  6. 微软云 azure 数据迁移之oracle11g dataguard

    背景,将本地的oracle数据迁移到微软云azure云上面的oracleserver. 1.复制本地的rman备份集到微软云azure的oracleserver上 scp -r -P56922 201 ...

  7. Android Warning not all local changes may be shown due to an error

    idea使用svn出现Warning not all local changes may be shown due to an error,如下图所示: 解决方案: 1.File > Setti ...

  8. 关于python的冒号截取

    https://zhidao.baidu.com/question/877855739656978372.html

  9. Javascript和jquery事件--点击事件和触发超链接

    前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...

  10. 【 2017 Multi-University Training Contest - Team 9 && hdu 6162】Ch’s gift

    [链接]h在这里写链接 [题意] 给你一棵树,每个节点上都有一个权值. 然后给你m个询问,每个询问(x,y,a,b); 表示询问x->y这条路径上权值在[a,b]范围内的节点的权值和. [题解] ...