Question

Spring MVC

我在Spring MVC表单中添加了以下代码来添加文本框。我使用jquery以弹簧形式动态添加文本框。但是当我试图添加弹簧文本框时，这段代码不起作用。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<title>Home</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<style type="text/css">
div {
    padding: 8px;
}
</style>

<script type="text/javascript">
    $(document).ready(function() {
        var counter = 2;
        $("#addButton").click(function() {
          if        (counter > 10) 
         {
                                                      alert("Only 10 textboxes allow");
                                                return false;
                                            }

                                            var newTextBoxDiv = $(document.createElement('div'))
                                                                .attr("id", 'TextBoxDiv'+ counter);
                                            newTextBoxDiv.append('<label>Input Title '+ counter
                                                                    + ' : </label>'
                                                                    + '<form:input path="labels[2]" id="textbox' + counter + '" />');

                                            newTextBoxDiv.appendTo("#TextBoxDiv"+ counter);
                                            counter++; 
                                            $("#TextBoxesGroup").append(newTextBoxDiv);

                        });//addButton close

                        // remove textbox
                        $("#removeButton").click(function() {
                            if (counter == 1) {
                                alert("No more textbox to remove");
                                return false;
                            }
                            counter--;
                            $("#TextBoxDiv" + counter).remove();
                        });// end remove textbox

                        // get textbox value
                        $("#getButtonValue").click(
                                function() {

                                    var msg = '';
                                    for (i = 1; i < counter; i++) {
                                        msg += "\n Textbox #" + i + " : "
                                                + $('#textbox' + i).val();
                                    }
                                    alert(msg);
                                });
                    }); // end get textbox value
</script>
</head>
<body>
    <form:form method="POST" commandName="subindicator" action="saveXML">
        <div>
    <div id='TextBoxesGroup'>
        <div id="TextBoxDiv1">
            <label>Input Title 1 : </label><form:input path="labels[1]" id='textbox1'/>
        </div>
    </div>
    <input type='button' value='Add Button' id='addButton'>
    <input type='button' value='Remove Button' id='removeButton'>
    <input type='button' value='Get TextBox Value' id='getButtonValue'>

    </div>
    </form:form>
</body>
</html>

此代码适用于html文本框，但无法添加弹簧文本框，但不适用于：

newTextBoxDiv.append('<label>Input Title '+ counter
                                                                    + ' : </label>'
                                                                    + '<form:input path="labels[2]" id="textbox' + counter + '" />');

如果我以这种方式编写此代码，则上面的代码工作 -

var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" >');

请提供解决方案

Answer 1

这是因为，

<form:input path="labels[2]" id="textbox' + counter + '" />

将转换为，

<input name"labels[2]" id="labels2">

和javascript无法理解spring form标签。无论何时单击“添加”按钮，您都可以使用递增的计数器值以您现在的方式生成新索引。

如何使用jquery在spring中添加文本框

Spring MVC

1 个答案: