JS如何获取多个动态添加的表单的数据

Cool_Volcano 2018-01-03 11:06:36

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<button id= "addDiv">添加DIV</button>
<div id ="two">
<ul id="one" class="one">
<div>
<span>姓名：</span>
<input type="text" class="input">
</div>
<div>
<span>性别：</span>
<input type="text" class="input">
</div>
<div>
<span>电话：</span>
<input type="text" class="input">
</div>
</ul>
</div>
<button id="submit0"></button>
<script>
$("#addDiv").click(function addDom() {
var one = document.getElementById("one");
var oldHtml=one.innerHTML;
var oldHtml ='<ul class="one">'+oldHtml +'</ul>';
$("#two").append(oldHtml);
})
</script>
</body>
</html>

...全文

784 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Cool_Volcano 2018-01-05

打赏
举报

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加表单并获取数据</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <button id= "addDiv">添加表单</button> <div id ="two"> <ul id="one" class="one"> <div class="bigDiv"> <div> <span class="name">姓名：</span> <input type="text" class="name" placeholder="小红"> </div> <div> <span class="sex">性别：</span> <input type="text" class="sex" placeholder="女"> </div> <div> <span class="phone">电话：</span> <input type="text" class="phone" placeholder="1234"> </div> </div> </ul> </div> <button id="submit0">获取数据</button> <script> $("#addDiv").click(function addDom() { var one = document.getElementById("one"); var oldHtml=one.innerHTML; var oldHtml ='<ul class="one">'+oldHtml +'</ul>'; $("#two").append(oldHtml); }) var ul = document.getElementsByClassName("one"); $("#submit0").click(function(){ var data_b= []; for (var i = 0; i < ul.length; i++) { var input = ul[i].getElementsByTagName("input"); for (var j = 0; j < input.length; j++) { if(input[j].classList.contains('name')==true){ var name = input[j].value;} else if(input[j].classList.contains('sex')==true){var sex = input[j].value} else if(input[j].classList.contains('phone')==true){var phone =input[j].value} } var arr ={"name":name,"sex":sex,"phone":phone}; data_b.push(arr); } console.log(data_b); }) </script> </body> </html>

u010433265 2018-01-04

打赏
举报

循环所有的input，就可以了

Hello World, 2018-01-04

打赏
举报

放在form里面，用$("form").serialize()

缘飞梦 2018-01-04

打赏
举报

使用formData()对象动态获取表单数据，并且将数据传到后台，FormData 对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。 1.获取表单输入的值 inputForName = $('.inputForName').val(); 2.创建一个formData对象 var formData = new FormData(); //创建一个空的formData对象用来保存变量参数 formData.append("company_name", inputCompany);//以键值对的形式将这些值保存到formData对象中 3.调用ajax实现数据的上传与获取 $.ajax({ type: "post", //请求方式 dataType: 'json', url: //请求接口 data: formData, //请求参数（这里将参数都保存在formData对象中） processData: false, //因为data值是FormData对象，不需要对数据做处理。 contentType: false, //默认为true,不设置Content-type请求头 success: function(data) { console.log(data) layer.closeAll(); if(data.code == 1) { //请求成功 layer.msg('上传成功'); } else { layer.msg(data.msg); } } });

天际的海浪 2018-01-04

打赏
举报


    	$("#submit0").click(function(event){
	    	var arr = [];
	    	$(".one").each(function(){
		    	var inp = $(this).find(".input");
	    		arr.push({
		    		"姓名":inp[0].value,
		    		"性别":inp[1].value,
		    		"电话":inp[2].value
	    		});
	    	})
	    	alert(JSON.stringify(arr,null,4));
    	});

Cool_Volcano 2018-01-03