8 Replies Latest reply on Oct 1, 2009 1:42 AM by Phil.Arnold

    Show/Hide onclick and onload

    rmorgan Level 1

      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.

       

      <script type = "text/javascript">
      <!--
      function hide(x) {
      document.getElementById(x).style.visibility="hidden";
      }
      function show(x) {
      document.getElementById(x).style.visibility="visible";
      }
      //-->
      </script>

       

      <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>

      <cfinput type="datefield" name="sendbcastemaildate" value="#getLastedit.sendbcastemaildate#" validate="date" message="Enter a Valid Date" >

      </cfdiv>

        • 1. Re: Show/Hide onclick and onload
          rmorgan Level 1

          No ideas?

          • 2. Re: Show/Hide onclick and onload
            Phil.Arnold

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

             

            <body onLoad="hide('showhidesendbcastemail')">

             

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

            • 3. Re: Show/Hide onclick and onload
              mgw4jc Level 1

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


              <cfif sendbcastemail1_Checked EQ "True">

              show('showhidesendbcastemail');

              </cfif>


              • 4. Re: Show/Hide onclick and onload
                Phil.Arnold Level 1

                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...

                • 5. Re: Show/Hide onclick and onload
                  rmorgan Level 1

                  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.

                  • 6. Re: Show/Hide onclick and onload
                    Phil.Arnold Level 1

                    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.

                    • 7. Re: Show/Hide onclick and onload
                      rmorgan Level 1

                      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

                      • 8. Re: Show/Hide onclick and onload
                        Phil.Arnold Level 1

                        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.