重复表单字段

时间:2017-11-14 10:00:41

标签: javascript jquery spring forms spring-mvc

这是我在jsp页面中的表单的一部分,我想在按下“添加字段”按钮时重复:

<div style="font-weight:bold">Choose Form Fields:</div>
<table id="tbl-formfields" class="table vertical-align table-condensed" >
    <thead>
        <tr>
            <th width="10%">Display Order</th>
            <th width="33%">Field</th>
            <th width="33%">Input Type</th>
            <th width="12%">Make Required</th>
            <th width="12%">Action</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr id="tr-formField">
            <td>
                <form:select path="formOptionDisplayOrder" name="formOptionDisplayOrder" id="formOptionDisplayOrder">
                    <c:forEach begin="0" end="9" step="1" varStatus="loop">
                        <form:option value="${loop.count}"><c:out value="${loop.count}"/></form:option>
                    </c:forEach>
                </form:select>
            </td>
            <td>
                <form:select path="formFieldName" name="formFieldName" id="formFieldName">
                    <option value="">-------------------------------------</option>
                    <c:forEach var="ff" items="${formFields}">
                        <form:option value="${ff.formFieldId}">${ff.formFieldName}</form:option>
                    </c:forEach>
                </form:select>
            </td>
            <td>
                <div>
                    <span>
                        <form:select path="formOptionType" name="formOptionType" id="formOptionType">
                            <form:option value="">-------------------------------------</form:option>
                            <c:forEach var="ot" items="${optTypes}">
                                <c:set var="optValue" value="${fn:split(ot,' ')}"/>
                                <form:option value="${fn:toLowerCase(optValue[0])}">${ot}</form:option>
                            </c:forEach>
                        </form:select>
                    </span>
                </div>
                <div id="block-optionsInput" style="display:none">
                    <label>Options:</label><br>
                    <form:input path="fieldOptions" id="options" type="text" name="fieldOptions" data-role="tagsinput" value=""/><!-- value="Male,Female"/>-->
                </div>
            </td>
            <td>
                <label><form:checkbox  path="fieldRequired" name="fieldRequired" value="true"/> Required</label>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>
<div>
    <button type="button" id="btn-addfield" class="btn btn-primary">
        <span class="glyphicon glyphicon-plus"></span> Add Field
    </button>
</div>

重复此字段的javascript / jQuery代码是:

//****Repeat form field block****
    var repeatBlock = "#tbody";
    var repeatText = '<td>\n\
            <form:select path="formOptionDisplayOrder" name="formOptionDisplayOrder" id="formOptionDisplayOrder">\n\
                <c:forEach begin="0" end="9" step="1" varStatus="loop">\n\
                    <form:option value="${loop.count}"><c:out value="${loop.count}"/></form:option>\n\
                </c:forEach>\n\
            </form:select>\n\
        </td>\n\
        <td>\n\
            <form:select path="formFieldName" name="formFieldName">\n\
                <form:option value="">-------------------------------------</form:option>\n\
                <c:forEach var="ff" items="${formFields}">\n\
                    <form:option value="${ff.formFieldId}">${ff.formFieldName}</form:option>\n\
                </c:forEach>\n\
            </form:select></td>\n\
        <td>\n\
            <form:select path="formOptionType" class="optType" name="formOptionType">\n\
                <form:option value="">-------------------------------------</form:option>\n\
                <c:forEach var="ot" items="${optTypes}">\n\
                    <c:set var="optValue" value="${fn:split(ot,' ')}"/>\n\
                    <form:option value="${fn:toLowerCase(optValue[0])}">${ot}</form:option>\n\
                </c:forEach>\n\
            </form:select>\n\
            <div class="optBlock" style="display:none">\n\
                <label>Options:</label><br>\n\
                <form:input path= "fieldOptions" class="optInput" type="text" name="fieldOptions" data-role="tagsinput" value=""/>\n\
            </div>\n\
        </td>\n\
        <td><label><form:checkbox path="fieldRequired" name="fieldRequired" value="true"/> Required</label></td>\n\
        <td><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
            <span class="glyphicon glyphicon-remove"></span></a>\n\
        </td></tr>';
    $("#btn-addfield").click(function (e) {
        e.preventDefault();
        $(repeatBlock).append('<tr class="trRepeat">' + repeatText);
    });
    $(repeatBlock).on('click', '.removeField', function (e) {
        e.preventDefault();
        $(this).parent().parent().remove();
    });

当我在javascript部分添加Spring表单块时,出现以下错误:

Neither BindingResult nor plain target object for bean name 'formOptionDisplayOrder' available as request attribute

如果我在js部分使用简单的HTML表单块,页面加载正常,但后续重复字段中的数据不会发送到控制器。是不是添加了Spring表单块?是否有解决方法?

此外,是否可以将对象的可重复属性声明为数组/列表并循环控制器上的字段总数并设置值?

提前致谢。

0 个答案:

没有答案