*Edit: I may have to use a list but the same principle applies.
I'm attempting to bind an array to a form using the @ModelAttribute annotation. A table is populated with the contents of the array (each element in the array corresponds to a row in the table). The array may be populated with data or may be empty when it's bound. The user can add rows to the table (which should add elements to the array).
My question is how can elements be added to the array if it's already defined before I pass it in? Will this automagically happen when the form is submitted?
<body>
<h1>Members</h1>
<form:form action="configure" modelAttribute="members" method="post" id="member-form">
<table id="member-table" class="table">
<thead>
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody id="member-table-body">
<c:forEach items="${members}" var="member" varStatus="i" begin="0" >
<tr class="member">
<td><form:input path="members[${i.index}].name" id="name${i.index}" /></td>
<td><a href="#" class="remove">Remove</a></td>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Save" id="submit" />
<a href="#" id="add">Add Member</a>
<a href="?f=">Reset List</a>
</form:form>
</body>
__
$(document).ready(function(){
$('#add').click(function(e) {
e.preventDefault();
//Add a member
//Get the number of rows that are in the table
var memberTable = $('#member-table-body');
var numRows = memberTable.children('tr').length
//Add row to the table.
// memberTable.innerHTML(
return false;
});
$('.remove').on('click', function(e) {
e.preventDefault();
$(this).parent().parent().remove();
return false;
});
});