在javascript中动态添加文本框

Question

I dynamically add a text box whenever a user clicks a button to add more, which works fine. However, in PHP when I get the submitted field values by $_POST['skills'] , I only receive the first text box value, not the dynamically added ones. I'm almost positive there is something wrong with the way I am adding the text boxes in javascript. I use the following method to add a text box field:

function addTextBoxField()
{
            var input = document.createElement('input'); 
            input.type = "text";
            input.name = "skills[]";
            input.size = "30";

            var container = document.getElementById("skillfield");
            container.appendChild(input);
}

The HTML code I have for the text box is :

...
<td>
<div id="skillfield">
    <input type="text" size="30" name="skills[]" />
</div>
</td>
<td><a href="javascript:void(0);" class="addLink hidden" onclick="addTextBoxField();"><div class="button">+ Add</div></a></td>

Here is the php code as well:

if ($_SERVER["REQUEST_METHOD"] == "POST")
{ 
     $allskills = $_POST['skills']; 
     $size = count($_POST['skills']);
     print_r($allskills);
}

The output is the following, even though I inputted three values

Array ( [0] => java )

Answer 1

Your field name is skills not skill .So it should be $_POST['skills'].$_POST['skills'] is an array in this case. So access try with var_dump($_POST['skills']); and you will see all the values.