How to add textbox to form using javascript or jquery

Question

I have created a function in javascript to add some "" in a form but when I submit the form I cannot get values of these inputs in $_POST[""] and these added "" does not show in the source code of the browser I tested in (IE and chrome)

this my code:

<SCRIPT language="javascript">

    function addRow(tableID)
    {
        var hdnVal=document.getElementById("hdn");

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";

        cell1.appendChild(element1);


        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name="Quantity"+hdnVal;
        element2.name="q"+hdnVal;
        cell3.appendChild(element2);


        var cell4 = row.insertCell(3);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name="Description"+hdnVal;
        element3.name="D"+hdnVal;
        cell4.appendChild(element3);

        var cell5 = row.insertCell(4);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name="Amount"+hdnVal;
        element4.name="A"+hdnVal;

        cell5.appendChild(element4);
        var a= parseInt(hdnVal.value);
        a++;
        hdnVal.value=a;
    }

    function deleteRow(tableID)
    {
        try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }
        }catch(e) {
            alert(e);
        }
    }

</SCRIPT>


</head>


<form method="post" action="PurchaseOrder.php" name="t1">

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />


<TABLE id="dataTable" width="350px" border="1">

    <tr>
        <th>Check</th>    <th>Pos No</th>  <th>Quantity</th>  <th>Description</th> <th>Amount</th>
    </tr>

    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD> 1 </TD>
        <TD> <INPUT type="text" name="Quantity"  /> </TD>
        <TD> <INPUT type="text" name="Description" /> </TD>
        <TD> <INPUT type="text" name="Amount" /> </TD>
    </TR>


    </TABLE>
<input type="hidden" name="hdn" id="hdn" value="0" />
<INPUT type="submit"  name="submit" value="Send"/>

</form>

Thank you

Answer 1

Try this, hope it will work

Please remove

<input type="hidden" name="hdn" id="hdn" value="0" />

and add code like this

<TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD> 1 </TD>
        <TD> <INPUT type="text" name="Quantity"  /> </TD>
        <TD> <INPUT type="text" name="Description" /> </TD>
        <TD> <INPUT type="text" name="Amount" /> </TD>
</TR>

<TR><span id='hdn'></span></TR>

and change this line

hdnVal.value=a;

into

hdnVal.innerHTML=a; 

Also when you take values in post method, please use fields name which you created in dynamic..

Answer 2

Adding whatever element with javascript after page load will add that element on the DOM only. Ergo, you won't see it hitting Ctrl + U (or whatever shortcut your browser has for showing the current page's source code). Your only way for actually looking at dynamically inserted elements is using Firebug, Chrome Dev tools, or similar tools.

As for the POST issue, make sure your elements have the 'name' tag.