3 Replies Latest reply on Dec 3, 2008 10:39 AM by Dan Bracuk

    Dynamic <div> styles

    rmorgan Level 1
      I have this function to show or hide a control depending on which radio button is selected(Yes = visible, No = invisible). This works fine.

      However, in the spirit of reusing code I need to make some adjustments to allow the <div> to be visible if either the "yes" radiobutton is checked or if the datefield has a value. And invisible if the radiobutton is "no" or the datefield does not have a value.This would need to happen when the page loaded as it was populating other fields. I am using the same page to collect data and edit records. Could someone point me in the right direction to accomplish this? TIA


      <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="listoncalendar2" name="listoncalendar" value="No" onClick="hide('showhidelistoncalendardate')" checked="#listoncalendar2_Checked#">No
      <cfinput type="radio" id="listoncalendar1" name="listoncalendar" value="Yes" onClick="show('showhidelistoncalendardate')" checked="#listoncalendar1_Checked#" >Yes
      <div id="showhidelistoncalendardate" style="visibility:hidden">Select date:<br>
      <cfinput type="datefield" name="listoncalendardate" <!--- value="#getlastedit.listoncalendardate#" ---> > </div>