Search code examples
formsspring-mvcspring-form

Dynamic form with multiple objects submission in Spring?


I have an Object CreateProjectFormModel as follows (I am using Spring 4).

public class CreateProjectFormModel {
    private Project project;
    private List<DUser> users;

    public CreateProjectFormModel() {
        this.project = new Project();
        this.users = new ArrayList<DUser>();
    }

    public Project getProject() {
        return project;
    }

    public void setProject(Project project) {
        this.project = project;
    }

    public List<DUser> getUsers() {
        return users;
    }

    public void setUsers(List<DUser> users) {
        this.users = users;
    }
}

I am not able to figure out how to create Controller and a corresponding form so that multiple DUser can be submitted at once - can do it if the object does not consist of a collection?

Read this, but I don't know how may users will be added to the project in advance, so cannot fix the users size.

I read through thymeleaf tutorial, but would be interested to know if can do without use of thymeleaf.

Thanks.


Solution

  • The link you posted in the question List<Foo> as form backing object using spring 3 mvc, correct syntax? should provide a solution for you, what is discussed in the comments

    I assume that this solution requires having a fixed amount of input fields, is that correct? What if you have a dynamic number of input fields?

    does not concern the number of users, which doesn't have to be fixed, rather it concerns the fact that that the properties of the object is differing, which I don't believe is your case. So, if your DUser has a property userName, and e.g. your Project has a property name. Your controller method could simply be,

    @RequestMapping(value = "/test", method=RequestMethod.POST)
    public String processSubmit(CreateProjectFormModel createProjectFormModel) {
           ...
    }
    

    and your form

    <form:form action="/form/test" method="post">
        <div class="single">
            <input type="text" name="project.name"/>
            <input type="text" name="users[0].userName"/>
            <a href="#" onclick="addNewUserInputSection();return false">add another user</a>
            <input type="submit" value="Save">
        </div>
    </form:form>
    

    where you will have to provide some effort is to create a javascript function addNewUserInputSection that will add new set of input fields for the users property with an incremented index, e.g.

    <form:form action="/form/test" method="post">
        <div class="single">
            <input type="text" name="project.name"/>
            <input type="text" name="users[0].userName"/>
            <input type="text" name="users[1].userName"/>
            <a href="#" onclick="addNewUserInputSection();return false">add another user</a>
            <input type="submit" value="Save">
        </div>
    </form:form>
    

    the examples are basic, but should be enough to have you resolve your issue