如何将表单变成2个数组[重复]
Posted
技术标签:
【中文标题】如何将表单变成2个数组[重复]【英文标题】：How to turn a form into 2 arrays [duplicate] 【发布时间】：2017-03-19 21:28:54 【问题描述】：我有一个带有两个文本框的简单表单：一个用于人们的“姓名”，另一个用于他们的“姓氏”。在页面上，您可以单击，它会在下面添加另外两个文本框，同样用于“姓名”和“姓氏”。所以基本上您可以添加任意多对的姓名和姓氏。
如何获取所有这些信息并将其转换为两个数组，一个用于“姓名”，一个用于“姓氏”？
您可以在此处查看演示：http://poostudios.com/jstest2.html
代码如下：
<html>
<head>
<script type="text/javascript" src="nutrition/jquery-3.1.1.js"></script>
<style type="text/css">
div
padding:8px;
</style>enter code here
</head>
<body>
<form action="results.php" method="get">
<script type="text/javascript">
$(document).ready(function()
var counter = 2;
$("#addButton").click(function ()
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Name : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" ><label> Surname : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
);
$("#removeButton").click(function ()
counter--;
$("#TextBoxDiv" + counter).remove();
);
);
</script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Name : </label><input type='textbox' id='textbox1' >
<label>Surname : </label> <input type='textbox' id='textbox2' >
</div>
</div>
<input type='button' value='Add' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
<input type="submit" value="Go">
</form>
</body>
</html>
【问题讨论】：
【参考方案1】：我是用两个数组 all name =>names[],all surename =>surenames[] 创建的。然后单击 go 按钮。您将看到 console.log 。它将显示
并且还使用文本框创建了类名。因为类名仅适用于 each 函数。
var names=[];
var surenames=[];
$(document).ready(function()
var counter = 2;
$("#addButton").click(function ()
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Name : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox1" class="textbox1" value="" ><label> Surname : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox2" class="textbox2" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
);
$("#removeButton").click(function ()
counter--;
$("#TextBoxDiv" + counter).remove();
);
$('input[type=submit]').click(function (e)
e.preventDefault();
var names = $('.textbox1').map(function ()
return this.value
).get();
var surenames = $('.textbox2').map(function ()
return this.value
).get();
console.log('names='+names);
console.log('surenames='+surenames);
)
);div
padding:8px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="results.php" method="get">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Name : </label><input type='textbox' class="textbox1" id='textbox1' >
<label>Surname : </label> <input type='textbox' class="textbox2"id='textbox2' >
</div>
</div>
<input type='button' value='Add' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
<input type="submit" value="Go">
</form>【讨论】：
以上是关于如何将表单变成2个数组[重复]的主要内容，如果未能解决你的问题，请参考以下文章