How can I preserve the unsubmitted contents of a web form whilst calling a refresh on its structure?

Your link could be a javascript hook to POST the form with a variable that tells your script "just store what's entered so far, but don't take it as the final submission". Then, when they re-enter the page, the page is pre-filled with all the selections that they've made so far. Whenever I make an interactive form like this, I treat the form as a template, and use hooks to pre-fill values where I can. For example: <input type=text name=first size=25 value=##value_first##> <select size=1 name=color> <option value=red ##selected_color_red##> </select> The, the PHP script will go through this template and replace anything in the ## pairs with appropriate values (as you can see, I'm naming them strategically so I can keep them straight in my mind. You can do it however you'd like).

When they insert "yellow" into the selection list, do you need the value "yellow" to get inserted into a database as well? Using some AJAX techniques would handle this. Instead of having the "add-a-colour" box on a seperate page, make it its own form and put it next to the selection list in your form. When the add-a-colour form is submitted, fire off an xmlHttpRequest to post the color to a PHP page that inserts into your database. The PHP page then spits out some text (it doesn't really have to be XML) that says it was successful, and maybe a new list of all the colors in the database, which gets carried back to your form. When that message gets carried back to your form, you trigger an event with some Javascript that clears the selection list and then rebuilds it using the list it got from the message. There are AJAX libraries out there that can do the heavy lifting for you. Hope this makes sense.

but that would mean a form with 2 submit buttons So? These are quite common. Post the information to the add-a-colour page, put it in hidden INPUT tags in the form on that page. That form gets posted back to the original form page, and the script there recreates the form with the users initial values filled out, and the new category. Very simple, no javascript necessary, and much more elegant and predictable from the users point of view.

("the script there" means a script running on the server, obv.)

AJAX is definitely the best way to go, but an easier way might be to have the selection list, plus a "add new color" textbox below it (maybe in an expanding DIV or something). Then, when the form is submitted, either take the color they chose from the list, or if they typed a new color, add that and grab the ID before processing the rest of the form. I think that's by far the easiest thing to do. If it sucks too much from a UI standpoint, then try to go the AJAX route.

Cillit bang, that sounds like exactly the sort of thing I'm after. Maybe I'm being dim here... but how can I get submit-button 1 to submit the form, and submit-button 2 to take me to the add-a-colour page? I thought that the submit button just did what the form tag told it to, and as there's one form tag, there's one submit action. or... should the two pages be one and the same script...?

Handee, you may be able to nest a new form inside the existing form with a different action to take you to the add-a-colour page. However, I'm not sure if the original values would be picked up. It seems that frufry's method would be easiest.

If Javascript is acceptible there are a number of ways you could skin this cat. 1. Have the "add color" be a normal link, with a JS event attached that takes the contents of the form fields, encodes/serializes them and stores them in a cookie before following the link. Then have JS in the main form page that checks for that cookie and fills in the fields with the unserialized data if present. 2. Have a seperate form with identical (but hidden) fields that mirror the fields in the main form. The second form's submit is the "Add color" button, with a JS event attached that copies the field data from the main form to this secondary form. Then your "Add color" script on the server would receive the partially-entered field data and it would be responsible for somehow sending them back to the main form page with that data present. 3. Some sort of asynchronous XMLRPC (ajax) method for adding colors that doesn't require leaving the page. 4. Have the "Add color" link be a normal link, but make it open in another window, perform whatever action is necessary, and then inject the result back into the main form (again using JS) such that whatever the user has entered is still there as the page hasn't reloaded. This kind of cross-window injection is normally not allowed by the browser for obvious security reasons, but I think it's possible when both windows are part of the same domain.

s/acceptible/acceptable/