Question

我有一个带有两个文本框的简单表单：一个用于人们＆＃34;名称＆＃34;另一个是他们的姓氏＆＃34;。在页面上，您可以单击，它将在下面再添加两个文本框，也用于＆＃34; name＆＃34;和＆＃34;姓氏＆＃34; ..所以基本上你可以根据需要添加多对名字和姓氏。

如何获取所有这些信息并将其转换为两个数组，一个用于＆＃34;名称＆＃34;和＃34;姓氏＆＃34;？

您可以在此处查看演示：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>

Answer 1

我创建了两个数组all name =>names[]，all surename =>surenames[]。点击了go按钮。您将看到console.log。它会显示

还使用文本框创建了类名。因为类名仅适用于each函数。

＆＃13;

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);
    
    })


 });

＆＃13;

div{
            padding:8px;
            }

＆＃13;

<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>

＆＃13;

如何将表单转换为2个数组

1 个答案: