Show/Hide onclick and onload

Report · Sep 23, 2009

Hi,

I have a form with yes/no radio groups and a corresponding text box relating to the individual radio groups. Basically, if no is selected then the text box does not appear and if yes is selected the text box does appear. This part is working fine. What I need now is for editing purposes for when the page loads it will also show the text box and its contents. As it is now when I pull up any records at a later time the yes is selected but the text box is not visible unless I click no and then yes again. What I need is to have the text area show if it is applicable. The onclick event works but I dont know how to get the onload to work, if that would be the correct way of doing it. TIA.

Here is what I have at the moment.

<cfinput type="radio" id="sendbcastemail2" name="sendbcastemail" onClick="hide('showhidesendbcastemail')" value="No" checked="#sendbcastemail2_Checked#">No

<cfinput type="radio" id="sendbcastemail1" name="sendbcastemail" onClick="show('showhidesendbcastemail')" value="Yes" checked="#sendbcastemail1_Checked#">Yes

<cfdiv id="showhidesendbcastemail" style="visibility:#showhidesendbcastemaildate#">Select date:<br>

</cfdiv>

Report · Sep 29, 2009

No ideas?

Report · Sep 29, 2009

Why can't you just call the hide() function in the onLoad part of the <body> tag?

It might seem obvious, but if not, put some JavaScript at the bottom of the page to call the function...

Report · Sep 29, 2009

Witihin the <script> tags after the functions you could add, assuming sendbcastemail1_Checked is either true or false.

show('showhidesendbcastemail');

</cfif>

Report · Sep 29, 2009

There is a possible problem (rare, but possible) with putting the code in the same script block is that it'll try to run the code as soon as that part of the page loads, and if it hasn't got the HTML part yet, it'll break as there's nothing to refer to.

If you move the <script> block below the HTML, then yes, it would work, but there are times when the HTML hasn't loaded yet, and the script shouldn't be run.

As an example, the office I'm currently in has a shared connection between 200+ people, and at times the download speed is less than 1kb/s, so imagine what that does to the page as it SLOWLY comes in, and tries to execute the code...

Report · Sep 29, 2009

Thanks. However, I messed up in my description of the problem. My bad. Now that I reread my description of the problem it occurs when the user goes back to the page. For example, if the user initially clicks yes the text box appears so that they can enter a date. But when they click 'next' to continue to the next page and then if the user decides to click the back button the radio is still checked as yes but the text box does not appear. In order to get it to appear again the user has to either simply click the yes radio or click no and then yes again. How do I get the text box to stay visible if the yes radio is selected.

Sorry for the incompetence in describing my issue.

Report · Sep 30, 2009

What you need to do is check the state of the radio buttons, and show/hide depending on that.

The easiest way is to check the status of the radio button before deciding to show or hide:

if (document.getElementById("sendbcastemail1").checked) {

show("sendbcastemail1");

} else {

hide("sendbcastemail1");

}

Not tested, but it should work, or require minor alteration to get working.

Hope that helps.

Report · Sep 30, 2009

I like this idea, can you give a little more info as to how to incorporate this into what I already have? I attempted but was not getting any results. TIA

Report · Oct 01, 2009

Remove the separate call to Show(), and put that code in it's place - my normal recommendation would be at the bottom of the page.

I don't particularly like the onLoad part of the <body> tag as it requires all images and elements to be loaded, while putting the JavaScript at the bottom of the page means that it runs as soon as the HTML part is completed.

Adobe Community

Show/Hide onclick and onload