Javascript Issue

Hey guys, freshly back from my recent ban () and have an issue with javascript.

Basically I have a piece of code like this:

 <select name='PAYMENTMETHOD' size="1"
 onChange="javascript:HideCCDetails(this)" >

Code (markup):

Then a div, with a list box, and 4 fields. The list box, when option (with the value 10005 is selected, the fields should be displayed, otherwise they should be hidden.

<script language=javascript type='text/javascript'>
 function hideDiv()
 {
 if (document.getElementById)
 { // DOM3 = IE5, NS6
 document.getElementById('CCDetails').style.visibility = 'hidden';
 }
 else
 {
 if (document.layers)
 { // Netscape 4
 document.CCDetails.visibility = 'hidden';
 }
 else
 { // IE 4
 document.all.CCDetails.style.visibility = 'hidden';
 }
 }
 }
 
 function showDiv() {
 if (document.getElementById) { // DOM3 = IE5, NS6
 document.getElementById('CCDetails').style.visibility = 'visible';
 }
 else {
 if (document.layers) { // Netscape 4
 document.CCDetails.visibility = 'visible';
 }
 else { // IE 4
 document.all.CCDetails.style.visibility = 'visible';
 }
 }
 }
 
 function HideCCDetails(selectObj)
 {
 if (selectObj.options[selectObj.selectedIndex].value == "10005")
 {
 showDiv();
 }
 else
 {
 hideDiv();
 }
 }
 </script>

Code (markup):

How can I edit the second part of the script so that the <div> for CC details is hidden all the time, and it only shown when the object with the value 10005 is selected. It works at the moment, but not when the page first loads, I need the fields to be hidden when the page loads.

Any ideas?

Thanks

 

And this was placed in the HTML part of the forum and not the JavaScript part because?

 

To test your patience? I joke, I joke - I've requested it to be moved. My apologies

 

No worries , just thought you'd get a better response over there, thats why I asked.

 

Nobody?

 

You just want to make it so the DIV is hidden by default? I think you were right in placing this in the HTML section at first since this is about HTML/CSS.

You can just simply do <div style="visibility:hidden;"> as your div (though I'm not sure if I'd recommend using the "visibility" setting since I think it's different with each browsers.. I tend to use display:none; for hiding them and display:block; for reshowing)

 

Thanks Zerxer, I'll just load that in and upload it and see if it works.

Cheers,
Spidey

 

Zerxer, unfortunately my laptop only has IE7 and Firefox2 installed - the code you gave, <div style="visibility:hidden;"> works perfectly in both. I will need to install other browsers on my desktop PC to check compatibility, but so far - this one does it Unfortunately the page where this is placed is mid way through the checkout so I can't check it using virtual browsers Anyway, I'll keep you updated.

Cheers,
Spidey