在javascript中动态添加文本框

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 )

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.

As far as the $_POST['skills'] is an array, Try this..

$skill = $_POST['skills'];

foreach($skill as $value){

echo $value;

}

do you mean the values of $_POST['skills']
i dont think there is something wrong with your javascript, what is wrong is how you read the post data in your php. The post data will be an array in this case, so you access it like this
$_POST['skills'][0] //value of 1st input
$_POST['skills'][1] //value of 2nd input

$_POST['skills'] is an array,So use print_r() to view the array.You may use as follows

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

                var container = document.getElementById("skillfield");
                container.appendChild(input);
    }
</script>
    <form method ="post">
        <td>
            <div id="skillfield">
                <input type="text" size="30" name="skills[]" />
            </div>
        </td>
        <td>
            <input type="submit" name="submit" value="Submit"/>
        </td>
    </form>
    <td><a href="javascript:void(0);" class="addLink hidden" onclick="addTextBoxField();"><div class="button">+ Add</div></a></td>
<?php 
    if(isset($_POST['submit']) && $_POST['submit'] == 'Submit'){
        echo "<pre>";
            print_r($_POST['skills']);
        echo "</pre>";
    }
?>

you could use the array length. Try to this

for($i=0;$i<=count($skills)-1;$i++)
{
  $per=$skills[$i]*$skills[$i];
  echo $per;
}