Skip to main content
E
EwokStud
Known Participant
November 30, 2011
Question

Hide Input(s) Until A Radio Button or Checkbox is selected

  • November 30, 2011
  • 1 reply
  • 1928 views

I've got a CFFORM I'm sculpting for my family's genealogy.  The first section is for people's names.  I would like to hide teh inputs from teh user, unless a radio button value is selected.  Most people are not adopted, but occasionally, a person may need to enter a persons's biological name as well sas their adopted name.  Starting out, the form is supposed to display only FirstName, MiddleName, and LastName, but if the radio button is selected for "This person is adopted" I wish for the inputs to display for adopted information.  Is there Coldfusion that will do this?

<CFFORM..etc.etc.>

<TR>

    <TD><B>Biological First Name:</B></TD>

   <TD><CFINPUT

    TYPE="text"

   NAME="txt_p_nm_bio_f"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=1

   id="txt_p_nm_bio_f"

   onBlur="javascript:changeCase(this.form.txt_p_nm_first)">

  </TD>

</TR><TR>

  <TD><B>Biological Middle Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_bio_m"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=2

   id="txt_p_nm_bio_m"

   onBlur="javascript:changeCase(this.form.txt_p_nm_bio_m)">

  </TD>

</TR><TR>

  <TD><B>Biological 2nd Middle Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_bio_m2"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=3

   id="txt_p_nm_bio_m2"

   onBlur="javascript:changeCase(this.form.txt_p_nm_bio_m2)">

  </TD>

</TR><TR>

  <TD><B>Biological Last Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_bio_l"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=4

   id="txt_p_nm_bio_l"

   onBlur="javascript:changeCase(this.form.txt_p_nm_bio_l)">

  </TD>

</TR><TR>

  <TD><B>Biological Maiden Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_bio_mdn"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=5

   id="txt_p_nm_bio_mdn"

   onBlur="javascript:changeCase(this.form.txt_p_nm_bio_mdn)">

  </TD>

</TR><TR>

  <TD><B>Male:</B>

  <CFINPUT

   TYPE="radio"

   NAME="rdo_p_g"

   LABEL="Male"

   VALUE="M">

  </TD>

  <TD COLSPAN="3"><B>Female:</B>

  <CFINPUT

   TYPE="radio"

   NAME="rdo_p_g"

   LABEL="Female"

   VALUE="F">

  </TD>

</TR>

<!--- radio buttons are linked to text field in the database, thus the letter "A" or "B" --->

<TR>

  <TD><B>Biological:</B>

  <CFINPUT

   TYPE="radio"

   NAME="rdo_p_a_b"

   VALUE="A">

  <TD COLSPAN="3"><B>Adopted:</B>

  <CFINPUT

   TYPE="radio"

   NAME="rdo_p_a_b"

   VALUE="B">

  </TD>

</TR>

<!--- 'hoping to hide the following three inputs and labels, if the radio button selection is biological. --->

<TR>

  <TD><B>Adopted First Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_adp_f"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=1

   id="txt_p_nm_adp_f"

   onBlur="javascript:changeCase(this.form.txt_p_nm_first)">

  </TD>

</TR>

<TR>

  <TD><B>Adopted Middle Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_adp_m"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=2

   id="txt_p_nm_adp_m"

   onBlur="javascript:changeCase(this.form.txt_p_nm_adp_m)">

  </TD>

</TR>

<TR>

  <TD><B>Adopted Last Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_adp_l"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=4

   id="txt_p_nm_adp_l"

   onBlur="javascript:changeCase(this.form.txt_p_nm_adp_l)">

  </TD>

</TR>

<TR>

  <TD><B>Adopted Maiden Name:</B></TD>

  <TD><CFINPUT

   TYPE="text"

   NAME="txt_p_nm_bio_adp"

   SIZE="18"

   MAXLENGTH="18"

   TABINDEX=5

   id="txt_p_nm_bio_adp"

   onBlur="javascript:changeCase(this.form.txt_p_nm_adp_mdn)">

  </TD>

</TR>

Submit, reset, /CFFORM etc.etc.

    This topic has been closed for replies.

    1 reply

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    December 1, 2011

    Group the form fields into appropriate DIVs. Then use the style property Display or Visibility to show or hide a DIV. Google and find out more.

    The major difference between display="none" and visibility="hidden" is that, when visibility is set to hidden, the hidden element still occupies its place in the layout of the page. Whereas, your page may experience a jumping motion when the display is changed to none.

    Here follows an example for you to play with

    <script type="text/javascript">

    <!--

        function toggleDisplay() {

           var elem = document.getElementById('a_fields');

           if(elem.style.display == 'block') {

              elem.style.display = 'none';

            }

           else {

              elem.style.display = 'block';

           }

        }

        function toggleVisibility() {

           var elem = document.getElementById('b_fields');

           if (elem.style.visibility=="hidden"){

            elem.style.visibility="visible";

            }

        else {

            elem.style.visibility="hidden";

            }

        }

    //-->

    </script>

    <form name="f" id="f">

    <div id="a_fields">

    A1: <input type="text" name="a1"><br>

    A2: <input type="text" name="a2"><br>

    </div>

    <div id="b_fields">

    B1: <input type="text" name="b1"><br>

    B2: <input type="text" name="b2"><br>

    </div>

    <input type="checkbox" name="toggle_A" onclick="toggleDisplay()"><br>

    <input type="radio" name="toggle_B" onchange="toggleVisibility()">

    <input type="radio" name="toggle_B" onchange="toggleVisibility()">

    </form>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices