如何利用js获取form表单数据


本文摘自PHP中文网,作者V,侵删。

方法如下:

1、有的时候想偷点懒,页面上有大量的表单提交数据,每次单独获取都比较麻烦。代码冗余度也比较多,因此封装了一个方法。

2、表单元素必须要有name属性,name属性是向后端提交的字段数据。

3、html代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<h3>下拉框</h3>

 <select name="sel" id="sel" class="query">

  <option value ="sel-1">sel-1</option>

  <option value ="sel-2">sel-2</option>

 </select>

 <h3>输入框</h3>

 <input type="text" name="text1" class="query" value="hello" />

 <input type="text" name="text2" class="query" value="word" />

 <h3>密码框</h3>

 <input type="password" name="password" class="query" value="123456" />

 <h3>单选框</h3>

 单选1<input type="radio" name="radio" class="query" value="r1" checked />

 单选2<input type="radio" name="radio" class="query" value="r2" checked/>

 单选3<input type="radio" name="radio" class="query" value="r3" />

  <h3>复选框</h3>

 复选框1<input type="checkbox" name="check" id="" class="query" value="c1" checked/>

 复选框2<input type="checkbox" name="check" id="" class="query" value="c2" />

 复选框3<input type="checkbox" name="check" id="" class="query" value="c3" checked/>

 <h3>search</h3>

 <input type="range" name="range" id="" class="query" value="" />

 <input type="color" name="color" id="" class="query" value="" />

 <h3>

  <button type="button" id="save">

   提交

  </button>

 </h3>

4、此处引入了JQ库。

阅读剩余部分

相关阅读 >>

javascript如何将字符串反转

js中数组的迭代方法:filter、reduce、every、some

javascript如何删除子节点属性

js split方法如何使用

浅谈json.stringify()和json.parse()的应用

ajax获取网页添加到div中的方法

分享几个实用的单行 js 代码

在html中嵌入js代码的方法

原生js如何设置css

js怎么换行

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...