Cloning input fields with array name only get the first value in php?

Question

I clone my input fields using jquery. and get the value in PHP using var_dump first

Example

<form action="save.php" method="POST">
<div id="div-container">
 <div class="div-clone">
   <input name="name[]">
   <input name="bday[]">
   <input name="address[]">
   <input name="gender[]">
 </div>
</div>
<input type="submit" value="SUBMIT">
</form>

Now when then I'm cloning it using

$('#div-container').append($('#div-clone').get(0).outerHTML);

PHP CODE

if(isset($_POST['SUBMIT'])
{
 var_dump($_POST);
}

Does this result the array key value is also the same as the first one? because I only get one value and only the first one. Is there any way to solve this?

Thanks

EDIT I already getting data from my form my only problem is the input array that I clone. it's only getting the first value.

EDIT AGAIN When I try to add just input with the same name of an array without cloning its works perfectly. Any solution regarding this? Thanks

huh? like I said I want them to be array. That's why I put `[]` — Jovs, Apr 13 '20 at 19:39
@RoryMcCrossan I already cloning them my problem is my array on input they just output the first one only. — Jovs, Apr 13 '20 at 19:40
see this one https://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array the difference on the link is I'm cloning them using jquery but I only get the first input — Jovs, Apr 13 '20 at 19:42
_"The outerHTML property sets or returns the HTML element and all it's content, including the start tag, it's attributes, and the end tag."_ so you are appending a complete clone of that div, included "id" attribute. So that you will have two divs with the same id, that is not admitted — Roberto Caboni, Apr 13 '20 at 19:42
Your submit button has no `value` so `isset($_POST['SUBMIT'])` will never be true — Rory McCrossan, Apr 13 '20 at 20:34

score 2 · Answer 1 · answered Apr 13 '20 at 19:43

2

Firstly remove the id from the content you want to clone. If you don't you'll end up with duplicates which is invalid and can cause issues in JS and the UI. A better approach is to use classes.

In addition, if you want to copy elements simply use clone(). Try this:

$('button').on('click', () => $('.div-clone:first').clone().appendTo('#div-container'));

input { width: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Clone</button>
<div class="div-clone">
  <input name="name[]">
  <input name="bday[]">
  <input name="address[]">
  <input name="gender[]">
</div>  
<div id="div-container"></div>

answered Apr 13 '20 at 19:43

Rory McCrossan

331,213
40
305
339

Hi Sir, Did you try to dump the data to PHP? – Jovs Apr 13 '20 at 19:48
No. If you want to do that wrap the fields in a `
` tag and submit it to your PHP page. If you're struggling with that I'd suggest starting a new question
– Rory McCrossan Apr 13 '20 at 19:52
Have you tested this? Where is your PHP code? How are you sending the data? – Rory McCrossan Apr 13 '20 at 19:53
I already getting all my data to PHP using `var_dump` for now to check the data, the problem is just the input array that I clone is only geting the first value. I'll edit it to be a form. – Jovs Apr 13 '20 at 19:55
Yes, I understand that. Does this code not fix that issue? – Rory McCrossan Apr 13 '20 at 20:00
It doesn't sorry. – Jovs Apr 13 '20 at 20:02

score 1 · Answer 2 · answered Apr 13 '20 at 21:31

Output from your code is

array(4) {
  ["name"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["bday"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["address"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
  ["gender"]=>
  array(2) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "2"
  }
}

So it's correct. I cloned once, so I get two arrays of "name", two arrays of "bday" etc. I guess that you want another format, this is a little trickier I think. Try this:

<button id="clone">Clone</button>

    <form method="POST">
        <div id="div-container">
            <div class="div-clone">
                <input data-field="name" name="data[0][name]">
                <input data-field="bday" name="data[0][bday]">
                <input data-field="address" name="data[0][address]">
                <input data-field="gender" name="data[0][gender]">
            </div>
        </div>
        <button type="submit">Submit</button>
    </form>

    <pre>
    <?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        var_dump($_POST);
    }
    ?>
    </pre>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var i = 0;
        $('button#clone').on('click', () => {
            const clone = $('.div-clone:first').clone();
            i++;
            clone.find('input').each(function() {
                const fieldname = $(this).attr('data-field');
                $(this).attr('name', 'data[' + i + '][' + fieldname + ']');
            });
            clone.appendTo($('#div-container'));
        });
    </script>

This will give you the following output for one clone.

array(1) {
  ["data"]=>
  array(2) {
    [0]=>
    array(4) {
      ["name"]=>
      string(1) "1"
      ["bday"]=>
      string(1) "1"
      ["address"]=>
      string(1) "1"
      ["gender"]=>
      string(1) "1"
    }
    [1]=>
    array(4) {
      ["name"]=>
      string(1) "2"
      ["bday"]=>
      string(1) "2"
      ["address"]=>
      string(1) "2"
      ["gender"]=>
      string(1) "2"
    }
  }
}

The field name is exactly the PHP-Array structure. Using name[] is just an array counting up. But I think all four fields should make one entry. So you have to make one entry (named data), make it an array, which is counted up (by "i") and then you add the field name (name, bday etc.)

do you mean if you use my currently code the output is getting an array? why mine getting just the first one after cloning them. I'm quite confused because when I didn't clone them I manually added another form its getting all the array that I input — Jovs, Apr 14 '20 at 13:36

score 0 · Answer 3 · answered Apr 14 '20 at 13:59

After messing around for so many times I solved it.

It seems on my framework that there's a UI error that make my form end on the near div element after cloning. Thank you for all your answer. all your answer is right so I'll upvote them. Thank you.

Cloning input fields with array name only get the first value in php?

3 Answers3