3 Replies Latest reply on Nov 28, 2012 2:21 AM by pwizzard

    Make field visible if "Other" selected in drop down list

    pwizzard

      Is there a way of making a field visible and Required if a particular selection is made in a drop down menu.

       

      For instance I have 4 different options in my drop down menu including "Other" and if Other is selected, I want a new text field to be visible so the user can add more specific information.

       

      Any help or guidance would be appreciated.

        • 1. Re: Make field visible if "Other" selected in drop down list
          WolfShade Level 4

          Done with a lot of JavaScript.  Basically, you set that text field to "display:none;" using CSS so that it's hidden when the page loads.

           

          Then, using either a function or inline JavaScript in the "onchange" event of the select, check the value (or text) of the selected option.  If it's "other", then

           

          document.getElementById("hiddenFieldName").style.display = 'inline'

           

          ..and set the form validation to require it if the display is not "none".

           

          ^_^

          • 2. Re: Make field visible if "Other" selected in drop down list
            Fernis Level 3

            If you're using ColdFusion attribute required, I'm not sure how to change that dynamically. But if you're doing client side validtion with javascript - or double checking it after submitting with ColdFusion, this is easy in principle.

             

            <script language="Javascript">

                      function checkifother()

                      {

                                myselectfield = document.getElementById('myselect');

                                explanationdiv = document.getElementById('explanationdiv');

             

                                if ( myselectfield.value == 'Other')

                                {explanationdiv.style.display='block'}

                                else

                                {explanationdiv.style.display='none'}

                      }

            </script>

             

            <cfform name="myform">

                      <cfselect name="myselect" id="myselect" onchange="Javascript:checkifother();">

                                <option value="Option 1">Option 1</option>

                                <option value="Option 2">Option 2</option>

                                <option value="Other">Other</option>

                                <option value="Option 4">Option 4</option>

                      </cfselect>

             

                      <div id="explanationdiv" style="display:none">

                                <cfinput type="text" name="otherexplanation">

                      </div>

            </cfform>

            • 3. Re: Make field visible if "Other" selected in drop down list
              pwizzard Level 1

              Thanks, did the job nicely.