【发布时间】:2017-06-21 03:21:12
【问题描述】:
我很确定这个问题的答案在某处可用,我可能问错了。想象一下,我有一个文本框,用于在表单上存储某人以前的工作经验。用户可能有一个或多个以前的工作经验。因此,如果他们想输入多个工作经验,他们只需克隆文本框以输入新数据(对于同一字段)。用户可以根据需要多次克隆它。我的问题是,如何将这些数据(同一字段的唯一输入的随机数)从 JSP 发送到我的控制器? 我试图效仿这个例子,
HTML
<div id="clonedInput1" class="clonedInput">
<div>
<label for="txtCategory" class="">Learning category <span class="requiredField">*</span></label>
<select class="" name="txtCategory[]" id="category1">
<option value="">Please select</option>
</select>
</div>
<div>
<label for="txtSubCategory" class="">Sub-category <span class="requiredField">*</span></label>
<select class="" name="txtSubCategory[]" id="subcategory1">
<option value="">Please select category</option>
</select>
</div>
<div>
<label for="txtSubSubCategory">Sub-sub-category <span class="requiredField">*</span></label>
<select name="txtSubSubCategory[]" id="subsubcategory1">
<option value="">Please select sub-category</option>
</select>
</div>
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>
JAvascript - JQuery
var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;
function clone(){
$(this).parents(".clonedInput").clone()
.appendTo("body")
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
}
})
.on('click', 'button.clone', clone)
.on('click', 'button.remove', remove);
cloneIndex++;
}
function remove(){
$(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
Example。我只是用文本框替换了下拉框。我想要的是,用户可以多次在这些字段中输入数据,最后他们将按下按钮提交,它将数据发送到我的控制器。我对使用 Spring MVC、JSP、Servlet 和控制器非常陌生。任何形式的帮助或指导都会很棒。我知道如何使用克隆功能在 HTML 中创建表单,但我不知道如何立即将数据发送到控制器。
【问题讨论】:
标签: jquery jsp spring-mvc controllers