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.getElementById('other_two').style.display ='block'; } else { document.getElementById('other_two').style.display =none; } ">
<option value="">select</option>
<option value="1">option - 1</option>
<option value="2">option - 2</option>
<option value="3">option - 3</option>
</select>
<div id="other_two" style="display: none">
Select 2:
<select name="select2">
<option value="">select</option>
<option value="1">option - 1</option>
<option value="2">option - 2</option>
<option value="3">option - 3</option>
</select>
<br>
Select 3:
<select name="select3">
<option value="">select</option>
<option value="1">option - 1</option>
<option value="2">option - 2</option>
<option value="3">option - 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.getElementById('other_two').style.display ='block'; } else { document.getElementById('other_two').style.display ='none'; } ">
<option value="">select</option>
<option value="1">option - 1</option>
<option value="2">option - 2</option>
<option value="3">option - 3</option>
</select>
<div id="other_two" style="display: none">
Select 2:
<select name="select2">
<option value="">select</option>
<option value="1">option - 1</option>
<option value="2">option - 2</option>
<option value="3">option - 3</option>
</select>
<br>
Select 3:
<select name="select3">
<option value="">select</option>
<option value="1">option - 1</option>
<option value="2">option - 2</option>
<option value="3">option - 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.selectedIndex].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.selectedIndex].value instead of this.value.

Thank you very much for getting me right with "this.options".
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.selectedIndex].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.options".
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?

[acoder]

...although I will follow the w3 link provided by acoder to read up on it.

I wouldn't advise it if you're new to JavaScript. It's not an easy read.

Try some of the tutorial links in this thread in the JavaScript forum.

[acoder]

Huh. When'd they do that?

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

Since DOM Level 1, it seems, so probably around 1998.

Yes, IE does support it, but you have to ensure that the options have values. Here's something I prepared earlier :)

[fjm]

Thanks Acoder. I will read the links you provided.

This may sound crazy, but I have always hated js and thought it was some kinda cheap wanna be language, but after getting that solution from Samatair, I am starting to change my mind. That was a perfect solution and fit very well for what I needed. Funny, but I couldn't do that with php. I know that php is server side only but one would like to think that php is possible of doing anything. :)

[acoder]

This may sound crazy, but I have always hated js and thought it was some kinda cheap wanna be language

JavaScript did have a bad reputation and is still to some extent the world's most misunderstood programming language. Deep down, it's actually a very rich and powerful language. If you use it correctly, it's very useful, but it can also be misused.