Here goes...

 

Ive seen this some where before but lost the book mark! (dont you hate that!)

 

For example I have form with a drop down menu with two options:

 

OPTIONS

Option 1

Option 2

 

When not clicked a general formed is displayed but when 'option 1' is selected another form is displayed and the same goes with option 2?

 

How would this be achieved?

 

Hope it makes sense?

 

Thanks!

do you want the redirect to happend when the user selects a different value from the option box? or after the user clicks the submit button?

 

In the former case you'd have to use Javascript, which then means it only works for user agents with JS enabled.

In the latter case you check the value of the option box and then perform redirects depending on the value using the PHP script that processes the form when it's submitted.

The JS Option would be best, how would I find out about that? Thanks TT

Alright mate.

 

You need to do an onchange event on the select tag which calls a function to show or hide 2 divs based on the selected value.

 

Something like:

 

Javascript function:

<script type="text/javascript">
function showDiv(id) {
if (id == 1) {
	document.getElementById('div1').style.display = 'block';
	document.getElementById('div2').style.display = 'none';
} else {
	document.getElementById('div1').style.display = 'none';
	document.getElementById('div2').style.display = 'block';
}
}
</script>

 

HTML Code

 

<select name="select" id="select" onchange="showDiv(this.value);">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="div1">
Div Area 1
</div>
<div id="div2">
Div Area 2
</div>

 

It's a simple way to do it if you only have 2 options.

 

If you have more options I would use the value of the option as the div id. You would need a function to hide all, call that and then show the one that is selected.

Brilliant! Thanks , not sure how I would do the latter thou?

Same HTML but with this JS:

 

<script type="text/javascript">

function hideDivs() {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
}

function showDiv(id) {
hideDivs();
document.getElementById('div'+id).style.display = 'block';
}
</script>

 

Above example if you have 4 divs named div1-4. The show div function concatinates the string 'div' with the value of the select box (1-4), making it show the relevant div.

Thanks Tucker, sounds like youve done that before! cheers

REMEMBER: some browsers/users have JS disabled, so you need a totally compliant form in order to make sure it works with non-JS browsers.

 

Always do a quick test with JS switched OFF in order to make the form work for all!

 

My own practice is to make the form work properly first with all browsers, then slip back to it and tweak it for 'gadgets', leaving a fully functioning version available for those people who love to mess with their browser settings

REMEMBER: some browsers/users have JS disabled, so you need a totally compliant form in order to make sure it works with non-JS browsers.

 

Always do a quick test with JS switched OFF in order to make the form work for all!

 

My own practice is to make the form work properly first with all browsers, then slip back to it and tweak it for 'gadgets', leaving a fully functioning version available for those people who love to mess with their browser settings

Hear! Hear!

Thanks all, will let you know how it goes, flat out at the mo!

Hi bennyboy,

 

Lately I've been doing a form which has got loads of options, and thanks to the development process these need to be changed around occasionally.

 

To deal with this, I put each stage of the process in it's own list-item, and assigned each li a "condition" attribute that was evaluatable by JavaScript.

 

I used a loop to go through each form element and add it's name (prefixed by P_) to the global scope.

 

So say I have this:

 

<input type='text' name='age' />
<li condition='P_age >= 18'>
LINKS TO HAWT pr0n
</li>
<li condition='P_age < 18'>
 LINKS TO POKEMON
</li>

 

Simple condition statements (which can become uber complex if you need them to be) allow me to quickly shift the flow of the form around.

 

I took it a stage further, whereby if the LI has a class attached, it assigns that class a true/false value based on it's condition, prefixed by S_ which meant less retyping...

 

If you want the code (jQuery) based, PM me