I’ve had a browse around the forums for this, and tried googling, but to no avail. I’m not really sure if I’m using the correct terminology!
I’m sure many people would like to know solutions for this. I’ll be as concise as I possibly can.
I’d like to know where to start with regards to using dynamic forms. To clarify, I mean forms that will show and hide additional inputs based on previous selections.
Working Example: A flooring shop. Let’s say the user has to enter all the usual info such as name and address fields, which are always there and static.
The user then has to choose what sort of flooring he’s ordering, so we’ll say two radio buttons, CARPET and VINYL. If the user selects CARPET, I want a new set of carpet-specific input controls to appear, for example PILE DEPTH, SOFTNESS, etc. If the user chooses VINYL, they will be presented with carpet-specific fields.
I envisage this to work along the lines of expanding divs that are triggered by onClick events associated with the CARPET/VINYL radio buttons (??).
It would be ultra-nice to have them slide in, fade in, etc, jQuery or whatever.
Can anybody point me to a decent related tutorial? I have a full knowledge of html and I’m okay with JavaScript as far as following tuts is concerned.
Any hints, pitfalls?
Thanks in advance to the community for any light you can shine on this
If you can’t find needed tutorials on Google, then everybody else isn’t likely to find them…
Anyway, regarding your question. You outlined the idea well, why not start implementing it? If any specific question arise, you can always ask them in specific forums.
Personally, I’d just start with JavaScript, assign some event handlers that will show more options based on selected ones.
I’d just advise you to be careful when validating all the input, because some fields will never be populated because they don’t belong to user’s initial choice.
Note: That doesn’t handle the case when a user goes back in their browser to return to the form. (The values of the form inputs that the user filled in will be restored in modern desktop browsers.) Re-checking the form inputs on load would fix that.