How do I implement Multiple Submit Buttons for a multi-row form?

Question

I have a form that will have this format:

1. I am first row (textbox) [Submit Button]
2. I am second row (radiobutton) [Submit Button]
3. I am third row (checkbox) [Submit Button]
4. I am fourth row (dropdown) [Submit Button]
5. I am fifth row (textbox) [Submit Button]
6. I am sixth row (textbox) [Submit Button]
7. I am seventh row (radiobutton) [Submit Button]

The text (ex: I am fourth row) and the value of the control will be loaded from a database. I would like the Submit button to only send the value of its control (ex: row 4, dropdown value == N/A) to the server. Not all the controls' values.

Now will I have to wrap each row with a Html.BeginForm or can I wrap all rows with one Html.BeginForm? What would be the best (or even better) way to handle such a thing.

Note: I've searched around SO and haven't seen a problem like this discussed.

Answer 1

Sounds like you need to create a loop to build your table.. and conditionally create the rows based on whatever it is that you are keying on to decide to put a specific element type( text, radio, checkbox, etc..) and each row would be have to be wrapped in form tags. Since you would need to evaluate for the correct element, you can use that to also build your BeginForm to tell it where to post to an action, possibly a different action per element type so that the action receives only the data you want it to receive

Answer 2

I believe you can do this using Jquery: First of all create individual forms for each row. Try using below code.. Jquery:

function SubmitForm(btn)
{
     var form = btn.serialize();
     $.post("your  URL here",form,function() {
         alert("Saved");
     });
}

Html:

<form id='form1' >
 ...
 Other controls on your form
 ...
<input type="button" id="form1" onclick="SubmitForm(this)" />
</form>

Answer 3

First off, you cannot nest form tags (browsers don't support it).

An input[type=submit] on click triggers a post back event on its' parent form. ex.

<form action='/PostBackTo' onsubmit='DoSomething()'>
<input type='submit />
</form>

So you will have to wrap every control inside its own form and any additional data you want posted back will need to reside in input or select tags inside the form.

Say you would like to post back an id with every submit, you would have to add

<input type='hidden' value='@id' />

inside every form tag to have it included in the postback.

I'd suggest if you do it this way, use javascript to intercept the submit action and submit the forms' data via AJAX post (if it's something like a 'save changes' button).

Answer 4

For example: 1. I am first row:

<input type="text" value="@textValue" id="txtFirstRow" />
<input type="button" onclick="post('txtFirstRow');" />

Javascript code:

function post(name)
{
    var txt = document.getElementById(name).value;
    $.getJSON("/Controller/Action",
    {
        text: txt
    },
    function (data) {
        //returned result
    });
}