Question

I’ve tried searching around but there isn’t something that is a fairly concrete example of this, and my ‘jQuery-Foo’ Is rather poor.

Here’s what I’m trying to accomplish:

User is presented with a form in which they enter user data (first/last/address, etc).

When it comes time to add a phone number, they need to be able to add as many as they would like. Through jQuery, how would i add another textbox to the form at a specific div (say div id=”phoneNumbers”), and have those textbox values be added to the resulting formcollection object on save?

Would this sort of scenario even work? Can anyone suggest a better option for accomplishing this?

Thanks in Advance

Answer 1

Hasn’t anyone told you? You can do anything in jQuery 😉

Here’s what the code might look like.

$("#phoneNumbers").append(
      "<input type=\"textbox\" id=\"newTxtBox\" name=\"newTxtBox\" />");

...

// Post the form with all values
$.post("/target/action", $("#myform").serialize());

Note that your div called “phoneNumbers” would have to be in the form “myform” for the new textbox value to be serialized and posted.

This seems like a reasonable approach as long as you can be sure that all your users will have javascript enabled. However, it’s always suggested to have a “graceful degradation” backup approach for when javascript cannot be used. The way I usually implement this is by adding a button to the form, like “add another phone number”, that if clicked, would post back to the server and generate a new form with an additional text box. In my jQuery document.ready() function, I’d just hide the button.