Jquery Form to insert into a table and on submit of the main form submit the table to ASP.NET MVC Controller

Question

this may sound kind of convoluted but basically i want to have a form within a form that submits items to the parent form in a table or something of the sort and then submit that with the parent form to an asp.net controller so i can move it to the database.

Anyone know of a way of doing this? I know I can inject into a table using jquery easily but the main thing is getting the injected table data into my formcollection or something so i can get it in the controller

EDIT for clarification: I'm trying to make an order input form, and on each order a person can have multiple items attached to it... I want them to be able to add as many of those items as they want and not have a static set of fields for them to input data. ideally it would operate much like how gmail used to function with email attachments, where you could add multiple

Answer 1

Hmm, from what it sounds like, you want to get the child form to submit data to the parent form, which can then submit to the server. Right?

I'm thinking that you could write a bit of javascript to push the data on the child form to a hidden field on the parent form when you hit the child form's submit (overriding the child form's submission), and then just parse that field in the controller.

Answer 2

Have a look at the jQuery function .serializeArray()

You can call it on your inner FORM (or perhaps just make it a DIV?) and turn all the results into a name.value array that you can manipulate and add to your outerForm any way that you want.

Perhaps you could be more specific and we could provide more suggestions?

Continued

So you could match all of the inputs you've selected and put their names and values into an array and then pass that though as either the value of a hidden control or use ajax to post the information through as JSON. Which one sounds more like your thing.

Also I remember your question from yesterday... will this be to upload files? If so, you are highly restricted on how you can handle those, so you'd best tell us if that is the case.

Write back for more discussion on this.

Addendum

So you have this as your form (roughly) and with a div inside with multiple inputs

<form action="..something.."> <-- you will want to generate this with MVC htmlhelper
    <div>
        <input type="text" id="dynamic_1" />
        <input type="text" id="dynamic_2" />
        <input type="text" id="dynamic_3" />
        .... etc ...
    </div>
    <input type="button" onclick="doSubmit()" />
</form>

then if you submit this form your formcollection will have a

dynamic_1 = "apple" dynamic_2 = "book" dynamic_3 = null

you can loop through it look for names until you hit null and you've got it all. If this doens't work for you, explain which bit in comments and i'll try again :)

PS If you want to submit all the data into a hidden control... you then probably want to use .serialize() instead of .serializeArray() and replace the delimiters so it doesn't mess up your post querystring.