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

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

13.10.2009 15:30:36
Nested forms aren't legal HTML. Can you clarify what you're actually doing?
Craig Stuntz 13.10.2009 15:48:40

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?


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.


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
        <input type="text" id="dynamic_1" />
        <input type="text" id="dynamic_2" />
        <input type="text" id="dynamic_3" />
        .... etc ...
    <input type="button" onclick="doSubmit()" />

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.

13.10.2009 19:41:14
i think this is the right route though, ill just add the stuff to a hidden input for postback, thanks for this
Jimmy 13.10.2009 17:48:30
no this wont be for file uploads, that will be something separate, also mind showing some code examples of using this method? the ones on the jquery page are kind of confusing, also i dont want to use this over the entire form, just the stuff i am working with dynamically
Jimmy 13.10.2009 18:09:54
How comfortable are you with JSON data.. or splitting querystring into arrays? There are many ways to do this.
dano 13.10.2009 19:17:56
haven't worked with JSON data much, i was planning on kind of storing the text in a hidden input to grab from the formcollection in the controller of my application
Jimmy 13.10.2009 19:33:27
in a way i want this to function similar to a comment post on any standard blog page, except this would be doable from the page where the blog post is written
Jimmy 13.10.2009 19:37:10

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.

13.10.2009 15:52:04