Javascript with Checkbox on Forms.

[Brooksy]

Hi,

I'm in need of some help with javascript, more specifically forms and checkboxes.

I have 2 checkboxes on a checkout payment page that when the user/customer selects/checks the checkbox more content shows i.e they can input extra details. (more text fields appear.)

To this current stage I have got this to work, so when checked it shows when unticked it hides. Perfect!

But this is where I am in need of help, or pointing me in the right direction. If a user selects the checkbox, then inputs information into the text fields that have just appeared and the page refreshes the checkbox(s) hides automatically again regardless if they are checked or not. - which is very annoying.

I'm pretty sure there is an easy way to do this. - maybe a simple line of javascript code with body onload perhaps?

Basically I wont the code to do, onload if checkbox checked, show content. on load if checkbox unchecked hide content.

Is this something basic to do or will I need to look into cookies for this sort of thing as well.

Many thanks in advance.
Brooksy

P.s If you need the code I can supply this no problem, I didn't want to overload my first post with my code aswell.

[jscheuer1]

The code or a link to the page would be good if you cannot take the info that follows here and run with it.

Basically you have an element, hopefully a division, with this extra content in it. This element should have an id. And the checkbox associated with it should also have an id or some way of uniquely identifying it on the page. So lest's say you have all that, and a means to show and hide the division or whatever it is (from here on I'll call it the div). That would be a function - say showHide(), that takes the div as a parameter and 'show' or 'hide' as the second parameter. You may have two functions, one to show, one to hide, whatever you have may have a different name. But this shows the general concept:

;(function(){
	var boxes = [document.getElementById('box1'), document.getElementById('box2')],
	content = [document.getElementById('box1content'), document.getElementById('box2content')];
	function getBoxes(){
		for (var i = boxes.length - 1; i > -1; --i){
			if(box[i].checked){
				showHide(content[i], 'show');
			}
		}
	}
	if (window.addEventListener){
	window.addEventListener('load', getBoxes, false);
	}
	else if (window.attachEvent){
		window.attachEvent('onload', getBoxes);
	}
})();

[Brooksy]

Hi, yes sorry I am using a div to hold my content.

Div id = checkboxdiv

I'm not using a id for the checkbox it's an onclick function within the checkbox tag. as follows here.

<input 
   type="checkbox" 
   name="mycheckbox" 
   value="yes" 
   onclick="CheckboxChecked(this.checked,'checkboxdiv')">

Here's my javascript code.

<script type="text/javascript" language="JavaScript">
function HidePart(d) { document.getElementById(d).style.display = "none";  }
function ShowPart(d) { document.getElementById(d).style.display = "block"; }
function CheckboxChecked(b,d)
{
   if(b) { ShowPart(d); }
   else  { HidePart(d); }
</script>

<script type="text/javascript">
CheckboxChecked(document.myform.mycheckbox.checked,'checkboxdiv');
</script>

You pretty much have what i got from what i can understand your explanation, which is all good. What the aim is to once a user is on the page they check the checkbox - which then expands the hidden content. They fill in the hidden content boxes and move down the form, but due to ajax further down the form ajax reloads the page for some other important functions of mine. So when the page refreshes even if the checkbox is checked it will close the hidden content. So to show it again you have to untick and re-tick for it to show. Is there a simple function or on call to say if checkbox checked on load show checkboxdiv?

Thanks

[jscheuer1]

Actually, what you have here:

<script type="text/javascript">
CheckboxChecked(document.myform.mycheckbox.checked,'checkboxdiv');
</script>

Should be fine to do what you want. Probably the only problem with it is that it appears on the page before the elements (the checkbox and the division) involved. Place it right before your closing </body> tag, and you will get the result you are after.