Dynamic display of fields on clicking a checkbox

[alpha33]

I need to display an extra field dynamically upon checking a checkbx on the page. I am using the following script and have got it to work fine. However, once the extra field is displayed, it does not disappear even if the checkbox is unchecked. I need to display an extra field only when the box is checked, and hide it when checkbox is unchecked. Can anyone help? Thanks a lot in advance.

===================

<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)


{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = the_change;
}
}

function hideAll()
{
changeDiv("temp","none");
changeDiv("test","none");
}

function getStyleObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else {
return false;
}
}
// -->
</script>

and in the body,

<form name="the_form">
<input type="Checkbox" name="temporary" onClick="hideAll(); changeDiv('temp','block');" value="temp"> Temporary check

<div id="temp" style="margin-left:100px;display:none">
<p><input type="text" name="testfield">
</div>

==========================

 

[tsuji]

You have to pass relevant info to the handler.
[tt]
<input type="Checkbox" name="temporary" onClick="hideAll(); changeDiv('temp',[blue]this[/blue]);" value="temp"> [/tt]

and the nature of the 2nd argument is changed to being the checkbox element.
[tt]
function changeDiv(the_div,[blue]obj[/blue])
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = [blue](obj.checked)?"block":"none"[/blue];
}
}
[/tt]

 

[theniteowl]

alpha33, a couple comments/suggestions.
tsuji's code above is a great replacement for your changeDiv but consider this also.

You are already setting your display property to none inside the temp div so setting it that way again using the hideall function is not necessary. You would be issuing a command to hide it followed by a command to hide/show it every time which is redundant.

If you are hiding several page elements at the beginning of your page load you could just set their display properties in their style or you can execute your hideall function from an onload call in the body tag rather than at the element level where it has to be clicked before it executes.
I realize that may just be leftover code from your own testing that you have not yet removed though.

Also, in your getStyleObject function you are testing for document.getElementById and document.all. document.all would be IE only while getElementById is part of the document object model. IE supports getElementById from at least IE v5 so unless you are trying to support much older browsers you could just use getElementById without the testing.

You could probably go without using the getStyleObject function at all and use something like this:

function changeDiv(the_div,obj)
{
  the_div.style.display = (obj.checked)?"block":"none";
}

<input type="Checkbox" name="temporary" onclick="changeDiv(temp,this);" value="temp"> Temporary check

Note that I removed the quotes from around the name of the div. Passing the name without quotes passes it as a reference to the object so you do not have to use document.getElementById(the_div).style to retrieve it before you can modify it.

This can bring it down to a single one line function instead of three separate functions.
You can even forego the function by putting the line directly into your input field like:

<input type="Checkbox" name="temporary" onclick="temp.style.display=(this.checked)?'block':'none';" value="temp"> Temporary check

Stamp out, eliminate and abolish redundancy!

 

[alpha33]

Thanks a lot, tsuji and theniteowl. Your solutions are great and have helped me understand the script better. I am using onclick="temp.style.display=(this.checked)?'block':'none';". Works great in IE, Opera and FireFox.

 

[alpha33]

Is there a way to keep the dynamically generated fields with the data entered by the user if the user submits the form and comes back by clicking Back button in the browser? These fields/data seem to go away when the user comes back to the page (even if I use the onload method to trigger the dynamic fields).

Thanks a lot.

 

[robherc]

I know it's not a comnpletely universal solution, as many ppl will have them disabled, but have you considered using cookies for this? It would definitely be the easiest method.



I hope this helps;
Rob Hercules

http://www.Robherc.com

 

[alpha33]

Thanks, robherc. Unfortunately, we don't have the option of using cookies due to some privacy concerns.

 

[robherc]

hmmm, maybe you could open a separate window outside the viewable area of the screen and save these as variables in the other document...then jsut have an onLoad event that checks for the presence of the "invisible" window, then retrieves the values from it if it is open?



I hope this helps;
Rob Hercules

http://www.Robherc.com

 

[theniteowl]

alpha33, there really is no good way to persist data using client-side script other than using cookies as Robherc suggested above. If you can use a bit of server-side code you can store the values in session variables and you can set one flag variable to indicate what the current state of the submission is in. At the top of your form page you check the flag variable value to see if it should use existing data from the session values or start fresh.



Paranoid? ME?? Who wants to know????