my javascript on load if select box checked

Hello,

I need sections of my page visible on load, if the corresponding checkbox is selected. My javascript file currently looks like --

window.onload = function resettoggle() {
var e = document.getElementById('ULSpecialDescriptionTGI');
e.style.display = 'none';
var e = document.getElementById('ULSpecialDescriptionPro');
e.style.display = 'none';
var e = document.getElementById('Pro-Direct-Special-Header');
e.style.display = 'none';
var e = document.getElementById('TGI-Direct-Special-Header');
e.style.display = 'none';

var e = document.getElementById('TGI-Direct-Pricing-Wrapper');
e.style.display = 'none';
var e = document.getElementById('TGI-Direct-Carriage-Wrapper');
e.style.display = 'none';
var e = document.getElementById('PRO-Direct-Pricing-Wrapper');
e.style.display = 'none';
var e = document.getElementById('PRO-Direct-Carriage-Wrapper');
e.style.display = 'none';
}

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = '';
else
e.style.display = 'none';
}

function Disable_Pro_Special_Carriage(status)
{
if (document.getElementById('procarriagerate').disabled)
document.getElementById('procarriagerate').disabled  = false;
else
document.getElementById('procarriagerate').disabled  = true;
}

function Disable_TGI_Special_Carriage(status)
{
if (document.getElementById('tgicarriagerate').disabled)
document.getElementById('tgicarriagerate').disabled  = false;
else
document.getElementById('tgicarriagerate').disabled  = true;
}


function enable_text(status)
{
status=!status; 
document.getElementById('normalproprice').disabled = status;
document.getElementById('specialpro').disabled = status;
document.getElementById('procrriageinc').disabled = status;
}

function enable_TGI_text(status)
{
status=!status; 
document.getElementById('normaltgiprice').disabled = status;
document.getElementById('specialtgi').disabled = status;
document.getElementById('tgicrriageinc').disabled = status;
}


function enable_TGI_Special_Offer(status)
{
status=!status; 
document.getElementById('displayspecialpricetgi').disabled = status;
document.getElementById('displayspecialdesctgi').disabled = status;

}

function enable_PRO_Special_Offer(status)
{
status=!status; 
document.getElementById('displayspecialpricepro').disabled = status;
document.getElementById('displayspecialdescpro').disabled = status;

}

function enable_TGI_Special_Price(status)
{
status=!status; 
document.getElementById('saletgiprice').disabled = status;
}

function enable_PRO_Special_Price(status)
{
status=!status; 
document.getElementById('saleproprice').disabled = status;
}

Open in new window


These work fine for my new product form, but I'm building an edit product form and currently I have checkboxes like =

<input <%If (CStr((RsEditProduct.Fields.Item("DisplayTGI").Value)) = CStr("Y")) Then Response.Write("checked=""checked""") : Response.Write("")%> name="displaytgi" type="checkbox" id="displaytgi" value="Y" onClick="enable_TGI_text(this.checked);toggle_visibility('TGI-Direct-Pricing-Wrapper');toggle_visibility('TGI-Direct-Carriage-Wrapper')"/>

Open in new window


What I want to achive is areas are already hidden if checkbox is not selected when the page loads...

I hope this makes sense..

thank you
garethtnashAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
>What I want to achive is areas are already hidden if checkbox is not selected when the page loads...

use CSS in head section :
<style type="text/css">
#LSpecialDescriptionTGI, #ULSpecialDescriptionPro, #Pro-Direct-Special-Header, #TGI-Direct-Special-Header, #TGI-Direct-Pricing-Wrapper, #TGI-Direct-Carriage-Wrapper, #PRO-Direct-Pricing-Wrapper, #PRO-Direct-Carriage-Wrapper {
   display:none;
}
</style>

Open in new window


or set the same class for every wrapper for example : wrappers
<style type="text/css">
.wrappers {
   display:none;
}
</style>

Open in new window

0
 
garethtnashAuthor Commented:
Hi LeaKim,

Firstly apologies for the delayed response, I was on leave and far from a PC.

Thank you your solution works a treat, however I have a checkbox at the top of the form that should allow me o toggle visibility....

So what I have done (for test purposes is)

added this in the head section -

<%If (CStr((RsEditProduct.Fields.Item("DisplayTGI").Value)) = CStr("Y")) Then%>
<style type="text/css">
#TGI-Direct-Pricing-Wrapper,
#TGI-Direct-Carriage-Wrapper {
   display:none;
}
</style>
<%End IF%>

added this to the checkbox -

<input <%If (CStr((RsEditProduct.Fields.Item("DisplayTGI").Value)) = CStr("Y")) Then Response.Write("checked=""checked""") : Response.Write("")%> name="displaytgi" type="checkbox" id="displaytgi" value="Y" onClick="enable_TGI_text(this.checked);toggle_visibility('TGI-Direct-Pricing-Wrapper');toggle_visibility('TGI-Direct-Carriage-Wrapper')"/>

And added the following script -

<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = '';
else
e.style.display = 'none';
}
</script>

I'm actually (in the test) doing the opposite I'm hiding the areas if checkbox = Y and trying to toggle visibility on checkbox change..

Is this possible?

Once again -

Many thanks

0
 
garethtnashAuthor Commented:
Sorry for the delay :)
0
 
leakim971PluritechnicianCommented:
no worry, look like you find your second issue, see you later
thanks for the points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.