How to dynamically add an HTML array element[]

Question

I have a form where I need to dynamically add as many text fields as the user wants to. I want the text fields to be an array, for example:

<input type="text" name="room_text[]">

I've already built something I thought would work. It successfully adds more text boxes. I added two more text boxes with javascript dynamically, making the form look like this:

<input type="text" name="room_text[]">
      <input type="text" name="room_text[]">
      <input type="text" name="room_text[]">

BUT, when I posted it to the PHP file, it only gets the first value. The reason why I know this is a javascript problem is becuase it works fine if you have more than one text box on page load. Its just when you add more text boxes with javascript.

If this helps, this is the jquery function I use to add the boxes:

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = $(this).parent('td').parent('tr').clone();
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).css("display", "none");
    $(mu).after(clone);
    $(clone).show("fast");
});

You should check to see what the HTTP transaction looks like. You can use a Firefox plugin like Tamper Data to see the exact state of the outgoing HTTP request when you post the form. If the input elements are showing up on the page, then it's highly unlikely that this is a JavaScript problem. — Pointy
– Pointy, Commented Apr 4, 2012 at 14:01
make sure the name attribute for the inputs room_text[] are being set properly ... if they're all the same then you will experience the behavior mentioned — Alex
– Alex, Commented Apr 4, 2012 at 14:03
Could you just avoid the PHP parameter array-name '[]' processing altogether? Perhaps have the text inputs outside the form, then collect their values on-submit, collate their values into a 'hidden' input (inside the form) and post it to the server. — David-SkyMesh
– David-SkyMesh, Commented Apr 4, 2012 at 14:06
@Xander What exactly do you mean by making sure the attribute inputs are being set properly? — Phill Tidd
– Phill Tidd, Commented Apr 4, 2012 at 17:31
the name attribute needs to be unique for each input text field... — Alex
– Alex, Commented Apr 4, 2012 at 17:41

Timothy Aaron · Accepted Answer · 2012-04-04 14:59:42Z

1

I believe the problem resides in the .clone() function. Can you try a different method, say ...

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = '<tr>' + $(this).parent('td').parent('tr').html() + '</tr>';
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).css("display", "none");
    $(mu).after(clone);
    $(clone).show("fast");
});

UPDATED - Oops. In that version "clone" is a string, not an element, so the .children() functions aren't working ... here's a corrected version:

$('.add').live("click", function() {
    var mu = $(this).parent('td').parent('tr');
    var clone = $('<tr>' + $(mu).html() + '</tr>');
    $(clone).children('td').children('.add').remove();
    $(clone).children('td').children('.redtext').remove();
    $(clone).children('td').children('.remove').css("display", "inline");
    $(clone).hide();
    $(mu).after(clone);
    $(clone).show("fast");
});

edited Apr 4, 2012 at 14:59

answered Apr 4, 2012 at 14:15

Timothy Aaron

3,08821 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Timothy Aaron Over a year ago

There are known issues with older versions of IE and .clone() ... something about the "deep copy" functionality, I think.

Phill Tidd Over a year ago

I tried the code you send me, it still does the same thing, only reads first element

Timothy Aaron Over a year ago

Same code works for me -- timothyaaron.com/test.php. You sure it's not your PHP?

Phill Tidd Over a year ago

I don't think so, but possibly. I did a print_r of $_POST['room_text'] and just gives the first element

Phill Tidd Over a year ago

Actually, anything I insert with javascript isnt getting picked up in PHP. Not just the arrays

|

Collectives™ on Stack Overflow

How to dynamically add an HTML array element[]

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related