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>
目录
相关文章
|
4月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
13天前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
17 6
|
13天前
|
存储 JavaScript 前端开发
使用jQuery实现Form表单提交
【9月更文挑战5天】
|
29天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
27 2
|
1月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
14 1
|
1月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
25 0
|
1月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
27 0
|
3月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
3月前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
24 0
|
3月前
|
前端开发 JavaScript
jQuery改变元素
jQuery改变元素