Hiden Div Code

[jamiecressey_media]

Hi guys, I'm sure this is a really novice question, but here goes...

I am looking for a hidden div script which, when a selected tick box in my PHP form becomes checked a drop down menu appears directly under it, and disapears if the tick box becomes unchecked again - if that makes any sence at all. I'm pretty sure this cant be done through PHP, so have resorted to JS\Ajax to solve my problem.

Can anyone guide me in the right direction as to what I need to be doing here?

Cheers

[Nile]

You would wanna do something like:

<script type="text/javascript">
function change_it(){
document.getElementById('this_div1').innerHTML='<select><option>1</option><option>2</option><option>3</option></select>';
document.getElementById('checkboxes').innerHTML='Check: <input type="radio" />';
}
</script>
<div id="checkboxes">
Check: <input type="radio" onChange="change_it()"/>
</div><br />
<div id="this_div1">
Check the radio button above...</div>

Edit:
I edited the code :P so if you tried it already try the updated 1.

[jamiecressey_media]

Hi Nile, thanks for the post. I have tried the code you suggested and it works a treat in FireFox. However wont work in IE7.

Any ideas?

Cheers

[Nile]

Try this:

<script type="text/javascript">
function change_it(){
document.this_div1.innerHTML='<select><option>1</option><option>2</option><option>3</option></select>';
document.checkboxes.innerHTML='Check: <input type="radio" />';
}
</script>
<div name="checkboxes">
Check: <input type="radio" onChange="change_it()"/>
</div><br />
<div name="this_div1">
Check the radio button above...</div>

Edit: fAnd if that doesn't work:

<script type="text/javascript">
function change_it(){
document.this_div1.value='<select><option>1</option><option>2</option><option>3</option></select>';
document.checkboxes.value='Check: <input type="radio" />';
}
</script>
<div name="checkboxes">
Check: <input type="radio" onChange="change_it()"/>
</div><br />
<div name="this_div1">
Check the radio button above...</div>

[jamiecressey_media]

Try this:

<script type="text/javascript">
function change_it(){
document.this_div1.innerHTML='<select><option>1</option><option>2</option><option>3</option></select>';
document.checkboxes.innerHTML='Check: <input type="radio" />';
}
</script>
<div name="checkboxes">
Check: <input type="radio" onChange="change_it()"/>
</div><br />
<div name="this_div1">
Check the radio button above...</div>

Edit: fAnd if that doesn't work:

<script type="text/javascript">
function change_it(){
document.this_div1.value='<select><option>1</option><option>2</option><option>3</option></select>';
document.checkboxes.value='Check: <input type="radio" />';
}
</script>
<div name="checkboxes">
Check: <input type="radio" onChange="change_it()"/>
</div><br />
<div name="this_div1">
Check the radio button above...</div>

Still the same result I'm affriad... Buggy IE7

[Nile]

Yea, I wonder how your suppose to use getElementById in javascript..
(the second and the third codes don't work if FF either.)

[jscheuer1]

Nile, div doesn't have value. With forms, innerHTML is an extremely bad idea. The two best options for dynamic content via javascript in forms are:

• Having the content already on the page and simply hiding it or showing it via either its visibility or display style property. (this is often best, as it is fairly easy to provide non-javascript fall backs for)
• DOM level 2 element creation and insertion/removal.

However, no javascript is all that great of an idea for important form content unless there is a server side and/or plain HTML back up to the function/content it provides. Javascript is also less secure than the server side, and depending upon the sensitivity of the data and/or its value in commerce, care should be exercised in using javascript for it.

[Nile]

Yes go with jscheuer1, Im really kinda new to js.

[jamiecressey_media]

Yes go with jscheuer1, Im really kinda new to js.

Thanks guys

Nile, div doesn't have value. With forms, innerHTML is an extremely bad idea. The two best options for dynamic content via javascript in forms are:

• Having the content already on the page and simply hiding it or showing it via either its visibility or display style property. (this is often best, as it is fairly easy to provide non-javascript fall backs for)
• DOM level 2 element creation and insertion/removal.

However, no javascript is all that great of an idea for important form content unless there is a server side and/or plain HTML back up to the function/content it provides. Javascript is also less secure than the server side, and depending upon the sensitivity of the data and/or its value in commerce, care should be exercised in using javascript for it.

Thanks for the info jscheuer1, what would you say would be the best way to hide the drop down menu, and show it when the tick box is checked?

Cheers

[Nile]

Use css.