遍历form表单里面的表单元素，取其value

末蓝、 2021-06-26 16:06 549阅读 0赞

> `form.elements` 获取所有表单元素

## `form`表单 ##

![在这里插入图片描述][20190724220545956.png]

<form action="http://localhost:1995/api/post" class="form" method="post">
        <input type="text" name="name" value="ajanuw">
        <input type="text" name="name" value="alone">
        <input type="text" name="name" value="xxx" disabled>
        <input type="text" value="bbb">
        <input type="password" name="pass" value="123">
        <button type="submit">p</button>
        <div>
          <p>单选框 性别</p>
          男：
          <input type="radio" name="sex" checked value="男"> 女：
          <input type="radio" name="sex" checked value="女">
        </div>
        <div>
          足球：
          <input type="checkbox" name="zuqiu" checked value="足球"> 篮球：
          <input type="checkbox" name="lanqiu" checked value="蓝球">
        </div>
        <p>
          <textarea name="wneben" id="" cols="30" rows="10">hello world</textarea>
        </p>
        <div>
          <select name="form-select" multiple class="asd">
            <option value="a" selected>aaa</option>
            <option value="b" selected>bbb</option>
            <option selected>
              hello
              <p>hello</p>
            </option>
          </select>
        </div>
        <fieldset name="group-from">
          <legend>健康信息</legend>
          身高：
          <input type="text" name="height" value="111" /> 体重：
          <input type="text" name="weight" value="222" />
        </fieldset>
      </form>

## `js` 代码 ##

## `body` 打印结果 ##

![在这里插入图片描述][201907242216334.png]

## `post` 后服务器收到的结果 ##

![在这里插入图片描述][20190724221655129.png]

## js遍历`form`表单元素 ##

//遍历所有的form表单
    for(var f=0;f<document.forms.length;f++){ 
    	var form=document.forms[f];
    	if(form.name==formName){ 
    		alert(form.name);
    		//遍历指定form表单所有元素
    		for(var i=0;i<form.length;i++){ 
    			var element=form[i];
    			if(element.type=="checkbox"){ 
    				alert("hello world");
    			}
    		}
    		break;
    	}
    }

[20190724220545956.png]: /images/20210626/7ce8ae973759420cbfb9feb70d6eb6e7.png
[201907242216334.png]: /images/20210626/7a7bffd3a76742978d6c40b0b7bc3678.png
[20190724221655129.png]: /images/20210626/da9f6d92e4a14518ae8476effda4a1a4.png