如何使用javascript或jquery将文本框添加到表单

Question

我已经在javascript中创建了一个在表单中添加一些“”的函数，但是在提交表单时，我无法在$ _POST [“”]]中获取这些输入的值，并且添加的这些“”不会显示在浏览器的源代码中我在（IE和Chrome）中进行了测试

这是我的代码：

<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>

谢谢

Answer 1

试试这个，希望它能起作用

请删除

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

并添加这样的代码

<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>

并更改此行

hdnVal.value=a;

进入

hdnVal.innerHTML=a; 

同样，当您在post方法中获取值时，请使用在动态中创建的字段名称。

Answer 2

页面加载后使用javascript添加任何元素只会将该元素添加到DOM上。 嗯，您不会看到它按Ctrl + U（或浏览器用于显示当前页面源代码的任何快捷方式）。 实际查看动态插入的元素的唯一方法是使用Firebug，Chrome Dev工具或类似工具。

至于POST问题，请确保您的元素具有“名称”标签。