1

春季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 文本框，但不适用于添加 spring 文本框并且不适用于：

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="" >');

请给我解决方案

4

1 回答 1

2

发生这种情况是因为，

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

将转换为，

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

并且 javascript 无法理解 spring 表单标签。每当您单击添加按钮时，您都可以使用递增的计数器值来生成新索引，就像您现在正在做的那样。

于 2012-12-05T10:48:18.647 回答