Hide by div ids.

[frankcpl]

I am working on a form that I am trying to hide all divs with the "id="hidden" in javascript. I am at a loss on how to do this. Any help would be greatly appreciated.

 

[jmeckley]

ids should be unique. if you want to group multiple nodes with the same name use a class

<div id="a" class="hidden" />
<div id="b" class="hidden" />
<div id="c" class="hidden" />
<div id="d" class="hidden" />

I use jquery for all my js scripting. selecting all the divs with the class 'hidden' is

$(function(){
   $('div.hidden').hide();
   //or $('div.hidden').show();
});

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[frankcpl]

This is the part of the code I am trying to hide by the div id fields.

<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label"
style="width: 150px;">Date of
High School Graduation</label>
<input class="cf_inputbox"
maxlength="150" size="30" title="" id="text_36" name="dateGraduation">type="text"&gt;<a
class="tooltiplink" onclick="return false;"><img class="tooltipimg"
alt="" src="components/com_chronocontact/css/images/tooltip.png"
border="0" height="16" width="16"></a>
<div class="tooltipdiv">Date
of High School Graduation :: If you graduated from high school give the
date here. if you did not graduate, just leave it blank.</div>
</div>
<div class="cfclear">&nbsp;</div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label"
style="width: 150px;">High
School</label>
<input class="cf_inputbox" maxlength="150" size="30" title=""
id="text_37" name="highSchool" type="text"></div>
<div class="cfclear">&nbsp;</div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton"><label class="cf_label"
id="label1" style="width: 150px;">Have
you taken the GED?</label>
<div class="float_left"><input value="Yes" title=""
class="radio validate-one-required" id="radio50" name="radio5"
type="radio"><label for="radio50" class="radio_label">Yes</label>
<br>
<input value="No" title="" class="radio validate-one-required"
id="radio51" name="radio5" type="radio">
<label for="radio51" class="radio_label">No</label>
<br>
</div>
</div>
<div class="cfclear">&nbsp;</div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label"
style="width: 150px;">When
did you take the GED?</label>
<input class="cf_inputbox" maxlength="150" size="30" title=""
id="text_53" name="text_53" type="text"></div>
<div class="cfclear">&nbsp;</div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label"
style="width: 150px;">Which
State did you take the GED?</label>
<input class="cf_inputbox" maxlength="150" size="30" title=""
id="text_54" name="text_54" type="text"></div>
<div class="cfclear">&nbsp;</div>
</div>

 

[vacunita]

Assuming you don't want to sue Jquery for any reason, and considering ID;s should be unique perhaps this may work out better for you:

<div id="a" name="hidden" />
<div id="b" name="hidden" />
<div id="c" name="hidden" />
<div id="d" name="hidden" />
<div id="e" name="Nothidden" />

function hide_hidden_divs(){
 var divs=document.getElementsByName('hidden');
 var x="";
 for(x in divs){
  if(divs[x].style.display=='block' || divs[x].style.display==''){
    divs[x].style.display=none;
  }
  else{
    divs[x].style.display='block';
  }

 }

}

NOTE: I typed this directly into the reply box so there may be some errors, but you should get the idea.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[frankcpl]

Thanks for your reply. I see where to put that, now I am working on how I can make the radio button control the hide or show, my thinking is to use an if statement, but it isn't working, not for sure what I am doing wrong.

If id="text_36"=="" then
"div id=".display = "hidden"
else
"div id=".display = "show"
end if

Can you see where I am going wrong

 

[frankcpl]

Thank ya'll for the quick replys, I will let you know how it fairs.

 

[vacunita]

Your divs have no ID's. Anyway, its better if you use a name as those can be non unique. While ID's must be unique.

Besides there would be no way of getting all of the divs with the same Id, since getElementById only returns the first element it finds with the specified ID. GetElementsByName on the other hand returns an array of elements that have a particular name.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[vacunita]

Sorry we seem to be posting at the same time.
Radio buttons can't be unselected, so once clicked you can't actually uncheck them. I would use a checkbox instead.

Then you can simply call the function above and have it determine whether to show or hide them. No need to check the status of the checkbox.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[frankcpl]

I am not getting something. I have made a quick example of what I am trying to accomplish. In the following code, I want the to hide some text when the check box "hide" is check.

<html>
<head>
<script ="text/javascript">
function hide_hidden_divs(){
var divs=document.getElementsByName('hide');
var x="";
for(x in divs){
if(divs[x].style.display=='block' || divs[x].style.display==''){
divs[x].style.display=none;
}
else{
divs[x].style.display='block';
}

}
}
</script>

<title>Hidden Div</title>
</head>
<body>

<div class="form_item">
<div class="form_element checkbox">
<div class="float_left">
<input value="Hide" title=""
class="radio" id="check20" name="check2[]" type="checkbox"><label
for="check20" class="check_label">Hide</label>
<br>
<input value="Do Not Hide" title="" class="radio" id="check21" name="check2[]"
type="checkbox">
<label for="check21" class="check_label">Do Not Hide</label>
<br>

<div id="main=">This
is not hidden.
<div id="a" name="hide">This is
hidden.</div>
<div id="main">This is not
hidden.</div>
<div id="b" name="hide">This is
hidden.</div>
<title>Hidden Div</title>
<div id="main">This is not
hidden.</div>
<div id="c" name="hide">This is
hidden.</div>
</style>
<div id="main">This is not
hidden.</div>
<div id="d" name="hide">This is
hidden.</div>
</div>
</body>
</html>

Thanks to all that are trying to help.

 

[tsuji]

[1]
[tt]function hide_hidden_divs(obj){
if (obj.value=="Hide") {
var divs=document.getElementsByName('hide');
var x;
for(x in divs){
if(obj.checked){
divs[x].style.display='none';
} else {
divs[x].style.display='block';
}
}
}
}[/tt]
[2]
[tt]
<input value="Hide" title="" class="radio" id="check20" name="check2[]" type="checkbox" [blue]onclick="hide_hidden_divs(this)"[/blue]>
[/tt]

 

[vacunita]

Basically you need to actually call your function somewhere.
Namely the Onclick event of the chekcbox.

<input value="Hide" title=""
 class="radio" id="check20" name="check2[]" type="checkbox" [red]onClick="hide_hidden_divs();"[/red]>

And this is my mistake: divs[x].style.display=none;

none should be surrounded by quotes so:

divs[x].style.display=[red]'[/red]none[red]'[/red];




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[frankcpl]

Thank ya'll so much for the help. With the help of all the information I have received I have it working perfectly. Thanks again.

I should be able to use the same type of script for pull down boxes as well, right?

 

[vacunita]

Yes. just use the pull down's Onchange event instead of onClick.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[frankcpl]

Last thing on this div question. The code doesn't allow you to have multiple hidden items based off of multiple criteria, I am thinking that I have to do multiple .js files to accomplish this. Is there an easier way?

For example; I have the div class="computerType" that is hidden until they click the yes check box.
I am also wanting to have a div="computerKnowledge" to be hidden unless they click the yes check box in another part of the form.

 

[vacunita]

You can have 2 functions one for each checkbox. So you call a different function for each checkbox or a single function that checks what checkbox was clicked, you just need to send the checkbox reference to 5the function and work off of that.

For instance:

<input type="checkbox" [red]name="button1"[/red] onClick="myfunction(this);">
...
<input type="checkbox" [red]name="button2"[/red] onClick="myfunction(this);">



Then in the function:


function hide_hidden_divs(mycheck){
if(mycheck.name=='button1'){

[green]//code to hide one set of divs or even a call to a function to hide the divs[/green]
}
if(mycheck.name=='button2'){
[green]//code to hide another set of divs or call to function[/green]
}
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[frankcpl]

Light bulb just came on, and if I need more, then I can just add or change to do a case function. I am sooo rusty at this. I really appreciate the help.

 

[tsuji]

...And that's why the structure of the function I posted has a check of conditional obj.value=="Hide". You can use the same onclick to the other checkbox with value="Do Not Hide" Functionality corresponding to that checkbox would be in an additional block within the same function.