add dynamic controls and get its values using jquery

Question

I need to add dynamic controls and get its values in my asp.net mvc (C#) application using jquery.

On click of button, i need to add specific dynamic controls, enter the values and pass its values on clicking submit button using jquery.

For ex.: In Create Event of Google Calendar, we can add multiple options for reminder. Like that i need to add controls dynamically and pass its values to the database using jquery.

Any suggestions on this?

Answer 1

First step is to add the controls dynamically:

$(function() {
    $('#someButton').click(function() {
        // Add input control to the form:
        $('#someDivInsideTheFormThatWillHoldTheControl').append(
            '<input type="text" name="dynamicControl" id="dynamicControl" />'
        );
    });
});

And in the action that will handle the form submission you can read the value:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(string dynamicControl)
{
    // dynamicControl should hold the value entered
    // in the dynamically added input.
}

---

UPDATE:

To get the value of the dynamically added control you can use the val function:

var value = $('#dynamicControl').val();

Answer 2

You can add the dynamic controls as specified in the previous answer But just make sure that append these input elements within a "form" (You don't have to do this if you are planning to make an ajax "post" though). And, if you want to submit multiple values in a single "form submit" make sure that you follow the conventions specified in this blog post=> Model binding to a List