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

[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?

[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.