Submit multiple inputs through one form and append to array

Question

So I am relatively new to JavaScript but I have experience with programming. I have this code which allows the user to define how many addresses they would like to enter so then I can query google maps and find the geographic center. The problem with this is that it looks very unprofessional in the sense that they have to enter the number of fields on one page and then they are prompted with that many boxes on the next page. Is there any way to make only one form(with all the parameters I require for one entry) and then after they click submit, I append it to an array and then when they decide they have enough addresses they hit the final submit so then I can process the data using a PHP call? Any help would be great, but I am new to this so I might need more spelt out explanations, sorry. Thanks again!

TL;DR: I want to create a single entry field which when submit is clicked, the page does not refresh or redirect to a new page and appends the data entry to an array. From there the user can enter a new input and this input would also be appended to the array until the user has decided no more inputs are necessary at which point they would click the final submit allowing me to process the data.

Here is the code I have so far:

<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script>
        $(function(){
            var c = 0;

            $("#button1").click(function(){
              c = $("#inputs").val();

              $("#mydiv").html("");

              for(i=0;i<c;i++){
                    $("#mydiv").append('<input type="text" id="data'+i+'" name="data'+i+'" /><br/>');
              }
            });

            $("#button2").click(function(){
                $.post("getdata.php",$("#form1").serialize(),function(data){

                });
            });

        });
      </script>
    </head>
    <body>
    <form id="form1">
      Type the number of inputs:
      <input type="text" id="inputs" name="inputs" />
      <input type="button" id="button1" value="Create" />
      <div id="mydiv"></div>
      <input type="button" id ="button2" value="Send" />
    </form>

    </body>
</html>

getdata.php

<?php
  for( $i=0; $i<$_POST["inputs"] ; $i++){
    echo $_POST["data".$i]."\n";
  }
?>

Jonathan · Accepted Answer · 2017-08-21 19:29:11Z

Here is code:

EDIT: I rewrite the code, so you can also delete each address

$(document).ready(function(){
    $("#add-address").click(function(e){
        e.preventDefault();
        var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
        var label = '<label for="data[address][' + numberOfAddresses + ']">Address ' + (numberOfAddresses + 1) + '</label> ';
        var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" />';
        var removeButton = '<button class="remove-address">Remove</button>';
        var html = "<div class='address'>" + label + input + removeButton + "</div>";
        $("#form1").find("#add-address").before(html);
    });
});

$(document).on("click", ".remove-address",function(e){
    e.preventDefault();
    $(this).parents(".address").remove();
    //update labels
    $("#form1").find("label[for^='data[address]']").each(function(){
        $(this).html("Address " + ($(this).parents('.address').index() + 1));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post">
    <div class="address">
        <label for="data[address][0]">Address 1</label>
        <input type="text" name="data[address][0]" id="data[address][0]" />
    </div>
    <button id="add-address">Add address</button>
    <br />
    <input type="submit" value="Submit" />
</form>

After form submit you can loop through addresses like this:

foreach ($_POST['data']['address'] as $address){
   ...your code
}

Hope this help! :)

Is there a way to remove the field later on? And yes this helped a lot. Thanks so much!
I rewrite the code in my answer, now you can also remove each address.. and no problem, you are welcome! :)

Omer Arshad · Accepted Answer · 2014-04-05 21:16:25Z

2

Normally how I do this kind of stuff is to provide a user ability to add many input fields at client level and send them all in one array when submitting the form. That is more professional I believe. Try this JSFiddle to see what I mean.

<input type="text" name="address[]" />

answered Apr 5, 2014 at 21:16

Omer Arshad

5207 silver badges16 bronze badges

Comments

MamaWalter · Accepted Answer · 2014-04-05 21:53:15Z

2

if you want to POST dynamic value in a form you can do it like this:

<input type="text" name="adress[]" />

so in your case you could add new fields with javascript or jquery with the same name name="adress[]". and in your PHP you get an array:

$adresses= $_POST['adress'];

foreach ($adresses as $adress) {
  echo $adress;
}

FIDDLE DEMO

edited Apr 5, 2014 at 21:53

answered Apr 5, 2014 at 21:16

MamaWalter

2,1131 gold badge19 silver badges27 bronze badges

Comments

Wilmer · Accepted Answer · 2014-04-05 21:18:28Z

To process an array of inputs you can use the following convention:

HTML: simply add square brackets to the name attribute

<input type="text" id="data'+i+'" name="data[]" />

PHP: Post returns an array

for( $i=0; $i<$_POST["data"] ; $i++){
    echo $_POST["data"][$i]."\n";
}

JAVASCRIPT: $("#form1").serialize() will retrieve all the inputs data as name=value pairs even the inputs that are added dynamically. There's no need to keep an array you can just process all of them at the end.

benomatis · Accepted Answer · 2014-04-05 21:39:20Z

You don't need to create an array, $_POST is actually doing it all for you already.

So I suggest you do the following: using javascript (or jQuery), keep the button clicks, ~~but make sure the form submission is prevented (using preventDefault on the form)~~ [EDIT: You actually won't need this, as if the buttons are just buttons, no submit inputs, the form will not submit anyway], and just make sure you append another element every time they click a plus button or something; make sure you increment the name attributes of each input element that gets created.

When the user then creates submit, use submit the form via js, then on your getdata.php you can simply loop through all the values and use them that way you want. You will even be able to know the exact number by calculating the number of times a new input element has been added to the form.

I'll try to write up something for you in a minute, but if I was clear enough, you should be able to do that too.

EDITED: So here is what I've come up with; give it a try and see if this is something for you.

This is how the form would look like:

<form id="form1" name="myform" method="post" action="getdata.php">
    Enter address 1: <input type="text" name="address-1" /> <input type="button" value="More" onclick="createNew()" />
    <div id="mydiv"></div>
    <input type="submit" value="Send" />
</form>

And this would be the js code:

var i = 2;

function createNew() {
    $("#mydiv").append('Enter address ' + i +': <input type="text" name="address-' + i +'" /> <input type="button" value="More" onclick="createNew()" /><br />');
    i++;    
}

...and then getdata.php:

foreach ($_POST as $key => $value) {
    echo 'The value for '.$key.' is: '.$value.'<br />';
}

here is a fiddle demo

Thank you so much for your help. If you would be able to write something up it would be of great help, but I'm looking up the things you mentioned as well so I can learn. Again thanks!

Collectives™ on Stack Overflow

Submit multiple inputs through one form and append to array

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Related