Master/detail creation form

[d.parini]

Hi,

Here is my problem. I have:

public class Settlement implements Serializable {

    @Transient
    private static final long serialVersionUID = 1L;

    @NotNull
    @Temporal(TemporalType.TIMESTAMP)
    @DateTimeFormat(style = "M-")
    private Date moment;

    @NotNull
    @ManyToOne
    private Customer customer;

    @NotNull
    @ManyToMany(cascade = CascadeType.ALL)
    private List<Purchase> purchases = new AutoPopulatingList<Purchase>(Purchase.class);

}

public class Purchase implements Serializable {

    @Transient
    private static final long serialVersionUID = 1L;

    @NotNull
    private int quantity;
    
    @NotNull
    @ManyToOne
    private Product product;
    
}

And Product that contains details about a product.

My problem is that i want to obtain a single form where i can create a Settlement adding its Purchases.
Browsing the web i found other people with this requirement, but provided answers were not clear.
I'm trying to use a table to fill Purchase details. An ADD button at the bottom of the table should spawn a new row properly binded to the auto populating list.
Can you please give me some hints? Here is my actual jsp for create.jsp:

<script type="text/javascript">
		dojo.addOnLoad(function() {
			console.log("JS LOADED");
			var index = parseInt("${fn:length(settlement.purchases)}");
			console.log("index: " + index);
			dojo.connect(dojo.byId("addPurchaseButton"), 'onclick', function() {
				console.log("adding item " + index);
				var TABLE = document.getElementById('purchasesTable');
				var BODY = TABLE.getElementsByTagName('tbody')[0];
				var TR = document.createElement('tr');
				var TD = document.createElement('td');
				TD.innerHTML = '<b>Product: </b>';
				TD.align = 'right';
				TR.appendChild(TD);
				TD = document.createElement('td');
				TD.innerHTML = '<springform:input id="product" field="settlement.purchases[9].product.name" />';
				TR.appendChild(TD);
				TD = document.createElement('td');
				TD.innerHTML = '<b>Quantity: </b>';
				TD.align = 'right';
				TR.appendChild(TD);
				TD = document.createElement('td');
				TD.innerHTML = '<springform:input id="product" field="settlement.purchases[9].quantity" />';
				TR.appendChild(TD);
				BODY.appendChild(TR);
				index++;
			});
		});
	</script>
    
    <form:create id="fc_supermarket_domain_product_Settlement" modelAttribute="settlement" path="/settlements" render="${empty dependencies}" z="lkC5klIE/g9aKz378WV+k+h/TSA=">
        <field:datetime dateTimePattern="${settlement_moment_date_format}" field="moment" id="c_supermarket_domain_product_Settlement_moment" required="true" z="xZ0Lh/V2Cq70DASQ0JLWc2scfkA="/>
        <field:select field="customer" id="c_supermarket_domain_product_Settlement_customer" itemValue="id" items="${customers}" path="/customers" required="true" z="AqF8fpUFP8dpsizrPu7cFdGoSFM="/>
        <!-- <field:select field="purchases" id="c_supermarket_domain_product_Settlement_purchases" itemValue="id" items="${purchases}" multiple="true" path="/purchases" required="true" z="ZsccrQlqKH87Z+LSnCHqAxQtEqI="/> -->
        <table id="purchasesTable">
		<c:forEach items="${settlement.purchases}" varStatus="status">
			<tr>
				<td align="right"><b>Product: </b></td>
				<td><springform:input id="product" field="purchases[${status.index}].product.name"/></td>
				<td align="right"><b>Quantity: </b></td>
				<td><springform:input id="quantity" field="purchases[${status.index}].quantity"/></td>
			</tr>
		</c:forEach>
		<tr id="addPurchaseRow">
			<td align="right">
				<springform:input field="" type="button" id="addPurchaseButton" label="button_add" />
			</td>
		</tr>
	</table>
    </form:create>

I'm not able even to display that button, as it appears as a text field...