How to create text fields dynamically?

Form design: Should radio buttons control the content of associated text fields?

• A real nuts-and bolts design question; let's see if I can describe it in a way that makes sense: I've got a web form that allows me to create or edit an object -- let's say a pot-luck dinner invitation.  In this form, the user gets a group of radio buttons to specify what they're going to bring -- salad, main course, or dessert, let's say.  In addition, there's a text field associated with each item that allows the user to specify the details of what they're bringing.  So I click on the "main course" button, enter "burgers" into the text field, and submit the form.  The values are saved; all's well. [A good question here would be "why don't you just have one text field?"  This is where my example breaks down -- I'm not really building a pot-luck dinner application -- but bear with me and assume that each radio button needs to have its own field.] I now come back the next day and want to change my mind about the party -- I want to bring dessert instead a main course.  I get back to my version of this page and see the selected radio button next to "main course", with "burgers" in the text field.  I now click on the "dessert" radio button, and we finally come to the question:  What should happen, if anything, to the contents of the main course text field (the thing with "burgers" in it)? Option 1: Leave "burgers" in the field, and maybe mark the field as disabled since its radio button is no longer selected.  This is a bad idea because, when the user gets around to submitting the form, there will be text in two fields -- the old main course field and the new dessert field.  Even though the back end will ignore the main course text field (since its radio button is no longer selected), it still seems confusing and ugly.  But it's a good idea because, if the user starts to fill out the "dessert" field but changes his mind and wants to go back to bringing the main course, its text field still has its value -- he doesn't have to remember what it was and re-enter it. Option 2: When the user clicks on the "dessert" radio button, the contents of the main course text field should be cleared.  This is a good idea because there's now only one text value in the form at any time, and it's clear to the user what will happen when the form's submitted.   But it's a bad idea because, if he changes his mind as in Option 1, he has to remember what used to be there, and re-enter it. Option 3: When the user clicks on "dessert", the main course text field should be cleared, but only after saving the value somewhere.  If the user goes back to "main course", the saved contents can be retrieved and put back into the field.  This has obvious advantages, but it's not going to be clear to the user that the value is being saved anywhere, although I guess it WILL be evident when they click on the main course radio button and the field is filled in.  It also means I have to figure out where to put this value in between mouse clicks, but I suppose that's what cookies are for. Anyway, any thoughts out there?  Feel free to discuss/argue amongst yourselves.

• Answer:

  Your proposed solutions are too complex. Why radio buttons and multiple text fields? 1 dropdown menu and 1 text area solves this easily. Use the dropdown to select the meal. Use the text area for the description. The two elements work independently. User can change their selection with the dropdown. But changing what's in the dropdown does nothing to whatever is in the text area. It is clear that the user should edit their description to match their new selection. And if they decide that they want to go back to their original choice, they can switch the dropdown without fear of losing anything in the text area.