Many of my web development clients ask me for dynamic “branching” inputs in form elements on their websites. I’ve tried several different approaches to this problem and have come up with a few solutions that I would like to share.
Before I begin, you might be wondering exactly what I mean by the word, “branching”. Consider a sign-up form for an e-commerce website — the data that needs to be collected for a potential wholesale customer is more extensive (e.g. company name, tax id, etc.) than what is necessary for a new retail customer. Ideally, the application form would only display input fields for the more extensive data when the customer selects that they are indeed applying to become a wholesaler. Those applicants that select the retail option shouldn’t be presented with input fields that are unrelated to their desired status.
While it is certainly possible to have multiple forms on different pages or to use a variable in the linking URL to serve a particular version of a form via PHP scripting, a more elegant (and efficient) solution is to use Javascript to dynamically alter the form in response to user input.
When using Javasacript to craft a branched form, there are three primary methods:
- generate a pop-up window for the new inputs.
- generate a pseudo pop-up for the new inputs.
- toggle the visibility of a container to disply the new inputs.
I would recommend the third method (as it is the simplest) for most applications, but each has their own pros and cons and tastes may vary.
Generate a pop-up window for new inputs
(I’ve been interrupted and will finish this post in the morning)