Bind elements to a list with spring mvc ModelAttribute

Question

The question is based on getting a spring model attribute list element using an index from javascript on which explains that each name of the html element must contain an index. Example user[0]

I have a form that allows the user to dynamically add or remove elements from the list before submitting it. Let me put an example: we add 3 users, so the form will now contain 3 inputs:

<input name="user[0].name"    type="text" />
<input name="user[0].surname" type="text" />
<input name="user[1].name"    type="text" />
<input name="user[1].surname" type="text" />
<input name="user[2].name"    type="text" />
<input name="user[2].surname" type="text" />

If we submit this, we'll have 3 users each having a name and a surname. But, the problem comes when we try to remove the user[1] because I end up with this html:

<input name="user[0].name"    type="text" />
<input name="user[0].surname" type="text" />
<input name="user[2].name"    type="text" />
<input name="user[2].surname" type="text" />

If we submit this form, springs still creates 3 users but the user[1] will have null values for the name and surname.

I know that I can handle input names to always have a "correct" form. But is there another solution? I thought that a form like

<input name="user[].name"    type="text" />
<input name="user[].surname" type="text" />
<input name="user[].name"    type="text" />
<input name="user[].surname" type="text" />

may solve the problem but then I realized: how can spring know which name comes with which surname.

Any idea on a better solution?

How you are removing the fields? I mean hiding/disabling or removing HTML? — Ajinkya, Feb 01 '13 at 13:18
I had the same kind of issue, maybe this could help you: [Spring 3 MVC: one-to-many within a dynamic form (add/remove on create/update)](http://stackoverflow.com/a/9993144/1225328) — sp00m, Feb 01 '13 at 13:32
Hi Ajinkya, I'm using jquery to remove the inputs. They're wrapped with some divs and theres other html code that I ommited. — Gastón Fournier, Feb 01 '13 at 13:36
Thanks sp00m! It a good idea. Another solution I came up with is to dinamically set the name of the inputs before submitting the form. That is easily accomplished with jquery.each function. — Gastón Fournier, Feb 01 '13 at 13:38
@gfournier This could be interesting too! Please let me know your feedback if you tried yours `;)` — sp00m, Feb 01 '13 at 14:52

Gastón Fournier · Accepted Answer · 2013-02-01T15:46:53.323

Finally I added all the inputs without the indexed variable (in following the code now i'll add the containers that were missing before):

<div class="container">
    <input name="name"    type="text" />
    <input name="surname" type="text" />
</div>
<div class="container">
    <input name="name"    type="text" />
    <input name="surname" type="text" />
</div>
<div class="container">
    <input name="name"    type="text" />
    <input name="surname" type="text" />
</div>

So before submitting the form I use updateIndexedInputNames($(".container"), "user");

And let me share the code of updateIndexedInputNames:

function updateIndexedInputNames($container, name){
    $container.each(function(containerIndex, container){
        $(this).find("input,select").each(function(index, element){
            $(element).attr("name", name+"["+containerIndex+"]."+element.name);
        });
    });
}

I don't think that this is a better solution than the one suggested by @sp00m but it works too.

Hope this helps somebody!

Bind elements to a list with spring mvc ModelAttribute

1 Answers1