Question

I have a form which allows the user to create extra ‘rows’ using JQuery (using .clone) so that they can decide how many of the same information they need to submit. My issue is that I cannot work out how to access these form items within my controller.

the form that is being submitted may look like this

<input type='text' name='Amount' id='Amount'>    <select name='Item'>        <option value='1'>Item 1'</option>        <option value='2'>Item 2'</option>        <option value='3'>Item 3'</option>    </select> <input type='text' name='Amount' id='Amount'>    <select name='Item'>        <option value='1'>Item 1'</option>        <option value='2'>Item 2'</option>        <option value='3'>Item 3'</option>    </select> <input type='text' name='Amount' id='Amount'>    <select name='Item'>        <option value='1'>Item 1'</option>        <option value='2'>Item 2'</option>        <option value='3'>Item 3'</option>    </select> 

Basically, the block between input and the select could be repeated an infinite number of times. When I submit to the controller I am then using FormCollection form to access the form elements. from there I am unsure how I can access the items that have been submitted. I thought of using a for loop and then accessing them via something like form[‘Amount’][i] but obviously that is not going to work.

Am I going about this the right way and if so, does anyone have any suggestions about how this might work?

Thanks in advance.

Answer 1

I ended up realising that (blush) the mechanism which JQuery uses to find the string within the cloned row (to replace) is basically regex. Thus I just needed to escape the square brackets and period. Once I did this I was able use JQuery to create form as Phil Haack’s blog suggested.

Onto my next issue…!