jQuery快速获取form的所有元素

简介:

利用jQuery的serialize()方法快速获取form中所有input的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>快速获取form的所有元素</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function myFunction(){
    var postData = $("#formId").serialize();
    var tmpDic={};
    for(var i in postData.split("&")){
        var row=postData.split("&")[i];
        tmpDic[row.split("=")[0]]=decodeURIComponent(row.split("=")[1]);
    }
    console.log(postData);
    console.log(tmpDic);
    }
</script>
</head>
<body>

<p>在下面的字段中输入一些文本,然后按按钮。</p>
<form id="formId">
输入框1: <input type="text" name="fname" value="Donald"><br>
输入框2: <input type="text" name="lname" value="Duck">
<br><br>
</form>
<button onclick="myFunction()">点我</button>
</body>
</html>
目录
相关文章
|
6月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
1月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
20 2
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
25 6
|
2月前
|
存储 JavaScript 前端开发
使用jQuery实现Form表单提交
【9月更文挑战5天】
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
35 2
|
3月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
18 1
|
3月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
32 0
|
3月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
38 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作