jQuery not posting all inputs of a form after the .append()

Question

I have a form generated dynamically with the method .append() of jQuery. I can add any number of new input, textbox, cmbbox, etc...

But the problem is that when I do the sumbit of the form, the PHP target does not receive the new input added, but just the vars connected to the input already in the form before the append().

Any ideas?

The javascript:

$("#button").live('click',function add(){
   $("#list").append(
       '<li style="height:20px;">'
    +'<input type="text" class="text" id="prova" name="prova[]" value="prova">'+ 
       '</li>'
   );
});

The Html:

<input type="submit" id="button" value="Add input">
<form name = "form" id="form" action="post.php" method="POST">
   <ul style="width:670px;padding:0px 0px 30px 0px" id="list">
   </ul>
   <input type="submit" id="submit" value="Submit">
</form>

The PHP:

<?php
  print_r($_POST);
?>

Answer 1

Have any code to show? In order for php to "see" the vars submitted, you have to ensure that it has the "name" attribute specified on the form elements. I have a feeling your issue is going to be with the jQuery not the php.

Answer 2

Best guess: You haven't set name attributes for your dynamically added elements.

Answer 3

You can try

var_dump($_POST);

in php to see what is going on.

Answer 4

You are intercepting the click event and adding elements to the form, but the event has already started, and will complete its default action (submit the form) without re-checking the content of the form.

You should stop the event after adding the fields (preventDefault should be the right choice), and then re-submit the form.

Something along these lines:

$('#button').live('click', function add(event){
    event.preventDefault();
    $('#list').append(...);
    $('#form').submit();
});

I haven't tested it, but I'm pretty confident that it should work :)

Answer 5

Problem 1:

Your #button should not be of type submit, since you just want to use it to add to the form and not submit the form. So you should have:

<input type="button" id="button" value="Add input">

Problem 2:

You are overwriting your variables. The name is the variable sent with the form, so each input addition must have a new name, or the variable must be an array.

Additionally, you can't have more than one element with the same id.

The simplest way to solve this is to make prova an array by using the form prova[]:

$("#button").live('click',function() {
   $("#list").append(
       '<li style="height:20px;">' +
         // Removed repetitive ID and made prova an array
       '<input type="text" class="text" name="prova[]" value="prova"></li>'
   ); 
});

jsFiddle example