Forms that display additional options as options selected

Not sure how to explain this in the subject line but what I would like to do is create a form that displays additional form elements based on the users selection.

The best example I have seen (which of course I can’t find an example of now that I need to) is when you choose a country from a drop down box and it then changes the fields displayed to match that country - e.g if the US it has a list of States, if the UK it has a list of counties.

Now as far as I remember, this change takes place without the page having to reload - I could be wrong on this though.

Hopefully someone understands what I am trying to do and can offer me some advice on how to go about this. Perhaps it is Javascript or this AJAX malarkey?



1st example I found for you is:-

Search for " javascript form dynamic dropdown " or similar in Google or Yahoo for more…

Nice one - thanks philm.

On further investigation this is not quite what I am looking for. I want an entire section of a form to appear when a certain option is chosen.

For example, If I had a checkbox saying click this if you want to subscribe then I would like the following form fields to display:



Confirm Email:



So it would be like hiding a fieldset and then displaying it if a checkbox is selected. It could equally be a selection from a drop down or a radio button choice.

I am sure I have seen this sort of thing somewhere.

Just wrap what you want to show/hide in a div with an id for reference. You then manipulate the CSS style for that div, showing or hiding it.

This can be initiated with javascript using the onclick=“” action on a button, eg. onclick=“showDetails()”.

Thanks Philm - I appreciate your help. Sounds like a really simple solution. I assume if a div is hidden that the form fields will not be sent when the form is submitted. I guess I will soon find out:)

I know this is an old thread, but thought I might as well reply to this, as opposed to creating a new one, as I’m ostensibly after the same thing as the OP, but with a slight difference:

I’ve got a submission form, where a user needs to select an image or images for the product they’re adding.

The list of images they’re able to use is brought in and selected via a drop down menu and obviously they can only select one image per drop-down.

The complication is that some products might only have one or even no image (therefore only requiring one drop down to be filled-in) and other products might have upto, say, 5 images.

I know I could just list 5 different drop downs, but think this a little silly and a waste of space. I was wondering, therefore, whether by default when the page is loaded, just one “Primary Image” drop down is listed, and then if an image from that is selected, another drop down underneath appear saying “Second Image”, and then if one is selected from that, a third drop down appear saying “Third Image”, etc, etc

All the tutorials on the site linked to above by Philm assume “linked” drop downs. Mine aren’t linked as they’re essentially containing the same data, just that each drop down will have a separate “value” to pass in the string to be stored in its respective column in the db, when the form is submitted.

Any help or suggestions much appreciated!
Thanks :slight_smile: