Question

I add input text box dynamically and trying to pass values using POST method but everytime I submit the form, I only receive the first value.

<script type="text/javascript">

function add_ele() {

    // For Internet Explorer
        try {
            el = document.createElement("<input type='text' name='cat[]' >");
        }
        // For other browsers
        catch (e) {
            el = document.createElement('input');
            el.setAttribute('type', 'text');
            el.setAttribute('name', 'cat[]');
        }

    document.getElementById('cate').appendChild(el);
    }
</script>



<form action='submit.php' method='POST' enctype='multipart/form-data'>
<div id='cate' style='width:100px'>
<input type='text' name='cat[]' value='kjkj'>
</div>
</form>
<a href='#' onClick=\"return add_ele()\">Add Another</a>

Submit page:

$p_cat = $_POST['cat'];
foreach ($p_cat as $p_cate ) {

echo "$p_cate . <br>";
}

Someone please guide.

Answer 1

If that is your complete code, you’re not setting the <input>‘s value attribute, so there’s nothing to submit. Here’s a modified (and cleaned up) example:

<script type="text/javascript">

    function addElement() {
        var  input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('name', 'cat[]');
        input.setAttribute('value', 'some value');
        document.getElementById('cate').appendChild(input);

        // We need to return false so the href isn't followed.
        return false;
    }

</script>

<form action="submit.php" method='POST' enctype="multipart/form-data">
    <div id="cate" style="width: 100px">
        <input type="text" name="cat[]" value="kjkj">
    </div>
</form>

<a href="#" onclick="return addElement()">Add Another</a>