PDA

View Full Version : Hiden Div Code



jamiecressey_media
02-10-2008, 03:07 PM
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
02-10-2008, 03:16 PM
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>


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

jamiecressey_media
02-10-2008, 03:26 PM
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
02-10-2008, 03:34 PM
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>
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
02-10-2008, 03:54 PM
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>
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
02-10-2008, 03:57 PM
Yea, I wonder how your suppose to use getElementById in javascript..
(the second and the third codes don't work if FF either.)

jscheuer1
02-10-2008, 03:57 PM
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
02-10-2008, 04:01 PM
Yes go with jscheuer1, Im really kinda new to js.

jamiecressey_media
02-10-2008, 04:04 PM
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
02-10-2008, 04:20 PM
Use css.

jackbenimble4
02-10-2008, 04:57 PM
Here's an example of how you can do this. Note, this snippet is anything but good practice. To write truly elegant and versatile javascript a small library is needed. This is functional if you're not concerned, but use this code at your own risk. Also, the div containing the select menu needs to have no other classes but .sub_select_hidden. This is an example of somewhere where a small primitive js library would be useful so I could add or remove a class without affecting other classes applied to the div.


<html>
<head>
<style type="text/css">
<!--
.sub_select_hidden { display: none; }
-->
</style>
<script type="text/javascript">

function showHideSelect(checkboxId,menuName) {
var div = document.getElementById(menuName);
if(document.getElementById(checkboxId).checked == true) {
div.className = '';
}
else {
div.className = 'sub_select_hidden';
}
}

</script>
</head>
<body>
<p>Do you like dogs?: <input type="checkbox" value="1" name="likes_dogs" id="likes_dogs" onchange="showHideSelect('likes_dogs','sub_dogs')" /></p>

<div class="sub_select_hidden" id="sub_dogs">
<p>What kind of dogs do you like:</p>
<select name="kinds_of_dogs">
<option value="golden">Golden Retrievers</option>
<option value="terrier">Terriers</option>
<option value="labrador">Labradors</option>
</select>
</div>

</body>
</html>

jscheuer1
02-10-2008, 05:30 PM
You don't need:


<!--

-->

for style blocks.

The content should probably start out seen, and be hidden by style created by javascript, so that it will be available to non-javascript users.

Alternatively, a <noscript> section could provide non-javascript content.

What exactly is this for anyway?

jackbenimble4
02-10-2008, 05:33 PM
You don't need:


<!--

-->

for style blocks.

The content should probably start out seen, and be hidden by style created by javascript, so that it will be available to non-javascript users.

Alternatively, a <noscript> section could provide non-javascript content.

What exactly is this for anyway?


<!--

-->


They're used to prevent users on older browsers without CSS enabled from seeing the CSS. Whether they're still necessary is controversial, but if I'm writing an embedded stylesheet I always include them.

jscheuer1
02-10-2008, 05:51 PM
Older browsers ignore content in tags like script and style that they don't recognise.

jackbenimble4
02-10-2008, 06:28 PM
Older browsers ignore content in tags like script and style that they don't recognise.

I don't know, I'm just following the W3C recommendation (http://www.w3.org/TR/html401/present/styles.html#h-14.5).

jscheuer1
02-10-2008, 07:27 PM
I don't know, I'm just following the W3C recommendation (http://www.w3.org/TR/html401/present/styles.html#h-14.5).

I guess that's good enough for me, although I do not agree with everything the W3c recommends. Often in cases like this it is useful to follow what they say, rather than testing in all possible user agents. However, as a point of reason, if a UA has this trouble - rendering style as text - it has a great many other problems and will likely not display much of anything as the designer intends, if at all.

Still, I have to admit that I was unaware of the recommendation you cite, and assumed that all such 'hiding' tactics in HTML had been abandoned. This was on the basis of what I thought I understood more knowledgeable folks to say, which I may have misunderstood, or which may have just been technically wrong.