Add Elements to Form Dynamically with JS

Question

I have created 15 fields in my MySQL Table and would like to give the end user the option of using a form to add up to that many items. However, to keep the interface clean, I would like to only present them with maybe 2-3 Textboxes and give them a button that would allow them to add more should they need it.

I don't believe adding the textboxes to the form using Javascript would be an issue, but I am confused as to how to process it exactly once I have submitted the POST Data to the form handler. Can anyone shed some light on the best way to go about this?

Answer 1

If you have to use a normal POST variable containing all the form values, you should be able to do something like this:

When generating the textboxes with the server language and/or javascript, the way they are sent to the server is with their name attribute. If you provide a consistent way of naming the elements, you can "combine" things with numbers. For example, if you provide 2 textboxes every time the user clicks "Add" (one for "foo" and one for "bar"), then you can increment the number at the end to make sure they match.

<input type="text" name="foo1" /><input type="text" name="bar1" />
<input type="text" name="foo2" /><input type="text" name="bar2" />
and so on

Then on the server, you need to find every item in the POST variable that starts with "foo" and "bar"

for (item in POST) {
    if (item startswith "foo") {
        // Extract the number at the end, and find the related "bar"
    }
}

Answer 2

Assuming that you are using ASP.NET MVC for web application, along with jQuery for client side framework.

Let's more assume that you have a model like this:

public class Gift
{
    public string Name { get; set; }
    public double Price { get; set; }
}

Your initial action and data could be like this:

public ActionResult Index()
{
    var initialData = new[] {
        new Gift { Name = "Tall Hat", Price = 39.95 },
        new Gift { Name = "Long Cloak", Price = 120.00 },
    };
    return View(initialData);
}

Whereas, your view could be this:

<h2>Gift List</h2>
What do you want for your birthday?

<% using(Html.BeginForm()) { %>
    <div id="editorRows">
        <% foreach (var item in Model)
            Html.RenderPartial("GiftEditorRow", item);
        %>
    </div>

    <input type="submit" value="Finished" />
<% } %>

And partial view for gift editor could be this:

<div class="editorRow">
    <% using(Html.BeginCollectionItem("gifts")) { %>
        Item: <%= Html.TextBoxFor(x => x.Name) %>
        Value: $<%= Html.TextBoxFor(x => x.Price, new { size = 4 }) %>
    <% } %>
</div>

The key is "BeginCollectionItem" helper method, which is not standard in ASP.NET MVC. It will generate some keys for variable length models. I will add a link to files later. Your Handler would be like this:

[HttpPost]
public ActionResult Index(IEnumerable<gift> gifts)
{
    // To do: do whatever you want with the data
}

You get a list of gifts with this approach, filled with values in textboxes. To add one more item, you need to send an ajax request to this view:

Hope it helps Source: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ Download: http://blog.codeville.net/blogfiles/2010/January/ListEditorDemo.zip