不使用 jquery 和 jsp 檢索存儲在克隆文本框中的值

Question

用於克隆、刪除文本框中的數據並將其提交到下一個 jsp 頁面 SCRIPT 的腳本：

<script type="text/javascript">

    var x = 0;
    var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedInput").length;

    function count()
    {
    x += 1;
    document.getElementById( "counting" ).value = x;
    }

    function remo()
    {
    x -=1;
    document.getElementById( "counting" ).value = x;
    }

// BUTTON for CLONING the rows :
$("button.clone").live(
        "click",
        function() {
            $(this).parents(".clonedInput").clone().appendTo(
                    ".clonedOutput").attr("id", "clonedInput" + cloneIndex)
                    .each(function() {
                        var id = this.id || "";
                        var match = id.match(regex) || [];
                        if (match.length == 3) {
                            this.id = match[1] + (cloneIndex);
                        }
                    });
            cloneIndex++;
        });

// BUTTON for REMOVING the selected row :

$("button.remove").live("click", function() {
    $(this).parents(".clonedInput").remove();
});

//BUTTON for submitting the form

$("button.submit").live("click", function() {
    document.getElementById("form1").action = "FooServlet";
    document.getElementById("form1").submit();
});

表格和按鈕：

<div class="clonedInput">

        <div>

            <form id="form1" method="get">
                <table>
                    <tbody id="DuplicateTable">
                        <tr id="rowToClone">
                            <td><input type="text" name="ID0" value="1" /></td>
                            <td><input type="text" name="ID1" /></td>
                            <td><input type="text" name="ID2" /></td>
                            <td><input type="text" name="ID3" /></td>
                            <td><input type="text" name="ID4" /></td>
                            <td><input id ="counting" type = "text"/></td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <div class="actions">
            <button class="clone" onclick = "count()">Clone</button>
            <button class="remove" onclick = "remo()">Remove</button>
            <button class="submit" >Submit</button>

        </div>

    </div>
    <div class="clonedOutput"></div>

在下一個jsp頁面中獲取數據的代碼：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            PrintWriter out = response.getWriter();    
            out.println("Id: " + request.getParameter("ID0"));
            out.println("TestCases: "+ request.getParameter("ID1"));
            out.println("DataType: "+ request.getParameter("ID2"));
            out.println("Variable: "+ request.getParameter("ID3"));
            out.println("Keywords: "+ request.getParameter("ID4")); 
            out.println("count is " + request.getParameter("counting"));
    }

我面臨的問題是，在按下提交按鈕時，我只得到存儲在第一個文本框中的值，我沒有得到存儲在克隆文本框中的值......有人可以幫助我獲取值嗎存儲在克隆的文本框中？？？

Answer 1

每個clonedInput包含自己的表單，所有表單都帶有form1 ID。 當您然后提交時，您選擇了具有form1 ID 的元素，但由於有多個元素，瀏覽器會以某種方式選擇一個並使用它。 然后它會提交那個表格。 不是所有的人。 如果您想接收所有數據，請將表單拉到更高級別，這樣一個表單就可以保存所有輸入。