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

Question

Script for cloning, removing and submitting the data in the text boxes to the next jsp page 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();
});

FORM and BUTTONS :

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

code for getting data in next jsp page :

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"));
    }

The problem which i am facing is that, on pressing the submit button, i am getting the value stored only in the first textbox, i am not getting the values stored in the cloned textboxes.... Can somebody help me in getting the values stored in the cloned textboxes???

Answer 1

Each clonedInput contains its own form, all with the form1 ID. When you then submit, you're selecting the element with the form1 ID, but since there are multiple, the browser will pick one somehow and use that. It'll then submit that one form. Not all of them. If you want to receive all of the data, pull the form up to a higher level so there's one form holding all of the inputs.