How to turn a form into 2 arrays

Question

I have a simple form with two text boxes: One for peoples "name" and the other for their "surname". On the page you can click and it will add two more text boxes below, also for "name" and "surname".. so basically you could add as many pairs of name and surname as you want.

How do I take all that information and turn it into two arrays, one for "names" and one for "surnames"?

You can see the demo here: http://poostudios.com/jstest2.html

Here's the code:

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

prasanth · Answer 1 · 2016-11-06T14:06:03.357

I was created with two array all name =>names[],all surename =>surenames[] .and click the go button .You will see the console.log .It will shown

And also created the class name with textbox. Beacause class name only adapted with each function.

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>

How to turn a form into 2 arrays

1 Answers1