Input array ignoring values added after the DOM has loaded

Question

I have a <select name="id[]"> drop-down within a form on my page. I also have a button that can add more select boxes (and their containers), via jQuery:

$(document).ready(function() {
    // $(".add-blank").click(function() {
    $(document).on("click", ".add-blank", function() {
        var container = $(this).closest("div");
        container.find(".blank-group").last().clone().appendTo(container.find(".blank-container"));
    });
});

However, when I POST this information to a script, and var_dump($_POST['id']), the array only has one value, no matter how many items should have been in that array:

array(1) { [0]=> string(5) "21699" }

I'm almost certain it's because the first select box was in the code when the page loaded, but the rest have been added via jQuery after DOM ready.

My question is, how can I overcome this?

As you can see in my jQuery above, I tried changing my basic .click() to an .on("click"), but this didn't seem to have any effect.

The basic HTML of my form is this:

<form>
    <div class="blank-container">
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
    </div>
    <button class="add-blank" type="button"></button>
    <button type="submit"></button>
</form>

And pressing the .add-blank button three times extends the form like so:

<form>
    <div class="blank-container">
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
    </div>
    <button class="add-blank" type="button"></button>
    <button type="submit"></button>
</form>

If I chose options in those selects to the values 111, 222, 333 and 444 respectively, I would expect to POST the following array:

array(4) { [0]=> string(3) "111", [1]=> string(3) "222", [2]=> string(3) "333", [3]=> string(3) "444" },

But no matter how many/few values I attempt to pass in my id[] array, only the first value reaches the script, as only one <select> was on the page when it initially loaded..

Are the selects added to a div actually inside the form? can you show the html? It should work if you use `name="id[]"` — mplungjan, Aug 07 '15 at 09:06
Does this shed a light: http://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array — mplungjan, Aug 07 '15 at 09:22
Unfortunately not. I understand how to process the `id[]` array when it's passed to the next page. My problem lies with how to POST it in the first place. Because the jQuery dynamically adds the new ` — mpdc, Aug 07 '15 at 09:25
Try this: http://jsfiddle.net/mpdc/ooq6542d/2/ I changed the name of the selector from `div` to `form` for this barebones code. — mpdc, Aug 07 '15 at 09:33

Carsten Massmann · Accepted Answer · 2015-08-07T09:50:22.920

The way you add new select boxes may be the cause of your problem. You just .clone() an existing <select>. That means that you also clone the name of the new select. No matter how many selects you may have on your modified html form. After posting the receiving script will only see one variable $id[].

After cloning you should modify your new select by giving it its own name.

However, even with the same name you should get some results, see here for a modified version of your page:

$(".add-blank").click(function() {
   var cont=$(this).closest('div');
   $(".blank-group",cont).last().clone().appendTo(".blank-container",cont);
});
$('#go').click(function(){
   $('#out').text(decodeURI($('form').serialize()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="blank-container">
  <button class="add-blank">click here to get a new select</button>
  <div class="blank-group">
    <select name="id[]">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
    </select>
  </div>
</div>
</form>
<button id="go">show variables to be posted</button><div id="out"></div>

When you add a few more selects, change their values and then click on the "show variables to be posted" you will get a string like id[]=1&id[]=2&id[]=3. This should get processed by your receiving script as you expect it.

2nd edit:
Now my jquery selector for cloning does what yours did originally and it still works ...

The inputs *should* have the same name though! PHP supports the `[]` structure to input names, turning their values in to an array. — mpdc, Aug 07 '15 at 09:00
If you have more than one element with the same name in a form, you will get more than one sent. If the syntax name="somename[]" is used, PHP can parse this as an array. — mplungjan, Aug 07 '15 at 09:09
@mpdc: I simplified your jQuery-selector for cloning the selects and now it *should* work, see my demo above. — Carsten Massmann, Aug 07 '15 at 09:35
The jQuery was as complicated as it was because I have multiple forms structured the same on the same page. See this question: http://stackoverflow.com/questions/31858792/cloning-form-inputs-with-jquery — mpdc, Aug 07 '15 at 09:38

Input array ignoring values added after the DOM has loaded

1 Answers1