Dynamic Forms - options shown dependant on selections

Get Started
1

Hi guys and girls! :slight_smile:

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 :slight_smile:

all the best
Phil Gill

2

I knew it was a tough one people!

Can anybody even recommend a book that covers advanced form design, user interaction in this context, etc?

I guess I might have to tackle this the old skool way… :wink:

Seriously though, ANY resource greatly appreciated.

3

Hi,

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.

4

@Mike Borozdin

You’re right, I’m going to have to start from scratch myself. I’ve found a FEW hints online but nothing like what I want.

The reason, I assume, for my google failings is that I’m not using the correct terminology for the effect I’m after.

I’ll post the finished thing up on here for the benefit of the readers.

5

You’re probably not finding many tutorials because it’s not done on most forms, and because it’s also easy to do (if you know JS well).

Showing/hiding a DIV based on a checkbox can be done with just one line of JS (+ jQuery), for example:

$("#details-cb").change(function() { this.checked ? $("#details").fadeIn() : $("#details").fadeOut(); });

Or just JS:

document.getElementById("details-cb").onchange = function() { this.checked ? document.getElementById("details").style.display = '' : document.getElementById("details").style.display = 'none'; });

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.