javascript created input[type="text'] doesn't post it's variable

hey there, I'm creating a series of input elements and for some reason their values aren't $_POSTing. Any light shed on the subject would be appreciated!

My current code is as follows:

javascript

   Afields = 1;
    function addAdultInput() {
        if (Afields != 10) {
            document.getElementById('adultMembers').innerHTML += "<input type='text' value='' name='adult_members_"+Afields+"' /><br />";
            Afields += 1;
        } else {
            document.getElementById('adultMembers').innerHTML += "Only 10 Adult Member fields allowed.";
            document.getElementById('addAdultMember').disabled=true;
        }
    }

HTML

  <form name="form1" method="post" action="">
  <tr>
    <td class="style12" valign="top">Adult Members' Names:<br /><开发者_如何转开发;small>10 Max </small><input id="addAdultMember" type="button" onclick="addAdultInput()" name="add" value="Add Adult" /></td>
    <td id="adultMembers">
        <span class="erorr">*for paid members only</span><br />
        <input type='text' value='' name='adult_members_0' /><br />

    </td>
  </tr>
  <input type="submit" name="Submit" value="Register">
  </form>

I am not sure if this is what is particularly happening with you, but generally using innerHTML to add input fields is not recommended.

Instead, you should use createElement() and appendChild(), or you can alternatively use a library like JQuery or Prototype. You can find tons of help on using these two functions online.

Your code looks fine, so I'm not sure what's going on.

Two suggestions:

1. Put a web inspector (like the one in Safari) on your form and take a look at the DOM structure after you've added the fields.
2. You could just name all the fields adult_members[] and PHP will create an array for you out of the post variables.

I assume you've already put a print_r($_POST) at the top of your page to make sure the problem isn't elsewhere in your code?

You are starting your form inside a td. That is giving you a lot of trouble. Wrap the whole table (or more if need be) in the form. All of your inputs need to be in the form. Always validate your HTML to avoid problems like this.

The full and complete answer:

Using the innerHTML method doesn't actually add the DOM element to the source of the page, preventing any information entered into the element from $_POSTing. I solved this issue by using jQuery and the append() feature.

HTML

  <form name="form1" method="post" action="">
  <tr>
    <td class="style12">Adult Members' Names:</td>
    <td class="style12"><small>10 Max</small> <span class="erorr">*for paid members only</span></td>
  </tr>
  <tr>
    <td class="style12" valign="top"><small>Click to Add Fields</small> <input id="addAdultMember" type="button" name="add" value="Add Adult" /></td>
    <td><ol id="adultMembers" class="style12">
        <li><input  type='text' value='' name='adult_members[]' /></li>
    </ol></td>
  </tr>
  </form>

jQuery

var Acurrent = 1;
function addAdultField(){
    Acurrent++;
    if(Acurrent <= 10){
        var strToAdd = "<li><input type='text' value='' name='adult_members[]' /></li>";
        $('#adultMembers').last().append(strToAdd);
    } else {
        $("#addAdultMember").attr("disabled", true);
    }
}
$(document).ready(function() {

    $("#addAdultMember").click(addAdultField);

});

Thanks to the Sources:

Sinan Taifour (below) javascript created input[type="text'] doesn't post it's variable

Why doesn't jQuery Append work for the end of HTML List Items?