how to get an array post values

Question

In my script, I have input fields which are added dynamically. I have to get all input values using php but the problem in that $_POST['poids'] give me just the first value of input array, so just the first element of the array poids. This is my code:

$(function() {

  var max_fields = 10;
  var $wrapper = $(".container1");
  var add_button = $(".add_form_field");
  $(add_button).click(function(e) {

    e.preventDefault();
    const vals = $("> .item input[name^=poids]", $wrapper).map(function() {
      return +this.value
    }).get()
    const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a + b);

    if ($("> .item", $wrapper).length < max_fields && val < 100) {
      const $form_colis = $(".item").first().clone();
      $form_colis.find("input").val("");
      $wrapper.append($form_colis); //add input box
    } else {
      var err_msg = 'limit riched';
      //alert(err_msg);
      window.alert(err_msg);
    }
  });

  $wrapper.on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
  })
});

<div class="container1" style="min-height:200px">
  <button class="add_form_field">Add New Field ✚</button>

  <form method="post" action="postForm.php">
    <div class="item">
      <input type="text" placeholder="Poids" name="poids[]">
      <input type="text" placeholder="Longueur" name="longueurs[]">
      <input type="text" placeholder="Largeur" name="largeurs[]">
      <input type="text" placeholder="Hauteur" name="hauteurs[]">
      <a href="#" class="delete">Delete</a>
    </div>

    <button type="submit" name="" class="btn btn-danger btn-responsive "> Send </button></center>
    </a>
  </form>
</div>

to get post (postForm.php):

$poids = $_POST['poids'];
foreach($poids as $poid) {
  
  echo " -->" .$poid;
}

I hope that you undestand what I mean.

Thank you in advance

Does this answer your question? [Html/PHP - Form - Input as array](https://stackoverflow.com/questions/20184670/html-php-form-input-as-array) — Randy Casburn, Nov 02 '20 at 20:38

score 2 · Accepted Answer · answered Nov 02 '20 at 20:51

The problem is that you're appending the div with the new input fields to $wrapper, but that's outside the form. You need to put it inside the form.

Change

      $wrapper.append($form_colis); //add input box

to

      $('.item', $wrapper).last().after($form_colis); //add input box

score 0 · Answer 2 · answered Nov 02 '20 at 20:38

I'm no PHP expert, but by just browsing the code provided, it seems you're just searching for inputs with a name value of poids.

const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return +this.value }).get()

Then when you create a bew input, you do not append poids to the input name.

const $form_colis = $(".item").first().clone();
                  $form_colis.find("input").val("");
                  $wrapper.append($form_colis);

Therefore, you will only find one with your method, and that's this one:

   <input type="text" placeholder="Poids" name="poids[]">

So to solve this, inside the $form_colis method, add poids to it I do believe.

They're cloning the entire DIV, that makes copies of all the inputs. — Barmar, Nov 02 '20 at 20:44

how to get an array post values

2 Answers2