Skip to main content
P
pwizzard
Participating Frequently
November 27, 2012
Answered

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

  • November 27, 2012
  • 2 replies
  • 2140 views

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.

This topic has been closed for replies.
Correct answer Fernis

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>

2 replies

Fernis
FernisCorrect answer
Inspiring
November 27, 2012

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>

P
pwizzardAuthor
Participating Frequently
November 28, 2012

Thanks, did the job nicely.

WolfShade
WolfShade
Legend
November 27, 2012

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

^_^

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