如何使用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問題，請確保您的元素具有“名稱”標簽。