How to send multiple values for the same field from JSP to Controller in Spring MVC (Eclipse)?

Question

I am pretty sure the answer to this question available somewhere and I am probably asking this wrong. Imagine I have a text box to store previous work experience of someone on a form. The user may have one or more previous work experience. So, if they want to enter more than one work experience, they'll just clone the text box to enter a new data (For the same field). The user can clone it as many times as they want to. My question is, how can I send these data (Random number of unique inputs for the same field) from JSP to my Controller? I was trying to follow this example,

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. I just replaced the dropdown box with text box. What I want is, the user can enter data in these fields however many times they want, and at the end they'll press a button submit and it will send the data to my controller. I am very new to using Spring MVC, JSP, Servlet and Controllers. Any kind of help or direction would be great. I know how to create the form in HTML with cloning feature, but I do not know how to send the data to the controller at once.

Answer 1

Change the name of your input fields from "name[]" to simply "name".

Spring MVC will bind all the values to a collection of strings in your form object.

For example:

public class FormObject {
    private List<String> txtCategory;
    private List<String> txtSubCategory;

    // get + set

}