Dependant dropdowns with PHP?

[fjm]

I got a winner here..

I need a solution that will use a single html select and two input fields that depend on the value selected.

This dropdown will have 3 values. If a certain values is selected, I need two input boxes to appear. If either of the other two values are selected, then no additional input boxes should be added.

This sounds like a job for AJAX i'm sure but I haven't a clue about AJAX.

What I have now is a select tag with a js onchange event that fires when the user selects the value from the select box. With php, I test for the POST var and if it is the value where I need the additional input boxes, I echo them. This is all well and good until I need to submit the page.

In theory, I setup the page using the onchange and then submit the entire page after it has been completed. This is where I have my problem because to do it like this, I would need to nest form tags and I don't think this is correct.

Does someone have a code sample they could share with me or point me in the direction that I need to go?

Thanks,

Frank

[r035198x]

Will both values be coming from the database? In which case AJAX would be the best approach.

[fjm]

Will both values be coming from the database? In which case AJAX would be the best approach.

Hi r035198x,

No, actually, none of these will require db access to populate. I am populating the select box with hard coded values. There will be 3 option values (1,2, and 3).

When the user selects option #2 I need to show another two selects to the user. Just for clarification, when option #2 is selected it is only acting as a trigger so to speak to show the additional selects. (And also using the value for $_POST when the form is submitted.

In other words, if option #2 is NOT selected, I don't want to see the additional two selects. Of course, if it is, show them.

When the entire form is completed, the values from all of the selects, whether a single select or all three need to be submitted.

I am not sure how to handle this....

Thanks for the help r035198x!

Frank

[samatair]

Perhabs this may be useful.
Instead of using the style display: block, none you can also use style visibility: visible, hidden.
I used display since it does not hold the space of the elements.

[HTML]<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Select 1:
<select name="select1" onchange="if (this.value == 2) { document.getEle mentById('other _two').style.di splay='block'; } else { document.getEle mentById('other _two').style.di splay=none; } ">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<div id="other_two" style="display: none">
Select 2:
<select name="select2">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<br>
Select 3:
<select name="select3">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
</div><br>
<input type="submit" name="submit" value="submit">
</form>[/HTML]

[r035198x]

You don't need to post to the server to get that functionality. All you need is Javascript.

[fjm]

r035198x,

Thanks again for the help. Javascript was never a passion of mine so I am not really sure what I should use in this case. Is there a term I can search for?

Samatair,

Thanks for the snippet. It seems to work great. The only issue that I can forsee would be if the user made a mistake and entered the wrong value option, the two additional selects would render and will not go away which would force a post value on both of the selects.

It certainly is cool to know that about css. Thank you! If all else fails and I can't find a js solution, I will definetley be using yours. :)

Frank

[samatair]

I have missed single quotes around the value 'none'.
If you add them the script should work fine displaying the select boxes when option 2 is selected and remove them from viewing when other options are selected.
Try using them. If it does not satisfy your needs you can always google out. Best of Luck.


[HTML]<?php
if (isset($_POST['submit'])) {
echo '<pre>';
print_r($_POST) ;
echo '</pre>';
}
?><form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Select 1:
<select name="select1" onchange="if (this.value == 2) { document.getEle mentById('other _two').style.di splay='block'; } else { document.getEle mentById('other _two').style.di splay='none'; } ">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<div id="other_two" style="display: none">
Select 2:
<select name="select2">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<br>
Select 3:
<select name="select3">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
</div><br>
<input type="submit" name="submit" value="submit">
</form>
[/HTML]

[pbmods]

To get the selected value of a <select>, you have to use this.options[this.selectedIn dex].value instead of this.value.

[fjm]

Hey Pbmods,

Do you mean in my onchange event? Sorry. I am totally lost when it comes to js.

Say, how hard is js to learn anyway? With the advent of ajax, I think it may be an advantage to know.

arggg.. another learning curve to overcome.... :(

[r035198x]

Hey Pbmods,

Do you mean in my onchange event? Sorry. I am totally lost when it comes to js.

Say, how hard is js to learn anyway? With the advent of ajax, I think it may be an advantage to know.

arggg.. another learning curve to overcome.... :(

He's talking about line 9 in the code above.

[samatair]

To get the selected value of a <select>, you have to use this.options[this.selectedIn dex].value instead of this.value.

Thank you very much for getting me right with "this.optio ns".
But it worked for me. I think your way should be right.
Pls can you let me know the difference between the two.
If only I am not diverting from fjm's question.

[acoder]

To get the selected value of a <select>, you have to use this.options[this.selectedIn dex].value instead of this.value.

Hmm, why not this.value?

By the way, I think this thread should be moved to the JavaScript forum.

[fjm]

He's talking about line 9 in the code above.

Thanks r035198x for pointing that out. At least I can follow along now.

I really need to pick up a book on javascript.

[fjm]

Thank you very much for getting me right with "this.optio ns".
But it worked for me. I think your way should be right.
Pls can you let me know the difference between the two.
If only I am not diverting from fjm's question.

Thanks Samatair for the code and the help. Your solution worked out great!

The this.options is above me right now although I will follow the w3 link provided by acoder to read up on it.

Whatever Samatair has in his code seems to work great.

:)

[pbmods]

Hmm, why not this.value?

Huh. When'd they do that?

And more pertinently to my situation (unfortunately) , does IE support it?