Hide Other Textbox Until Other Option is Clicked

In this tutorial we'll cover how to display an Other Textbox in a Radio Button or Checkbox question only after the associated answer option has been clicked. Many users want their survey to be as clean as possible. Only showing an other field after being clicked can help your survey seem a little cleaner and a little less daunting.

Please note that this script is compatible with multiple 'other, write in' fields in the same question.

Check it out in an example survey.

OR

Add a survey with this setup to your account!

Setup

Go to the Style tab and scroll to the bottom of the survey preview to access the link to the HTML/CSS Editor. Paste the code below at the bottom of your HTML. 

<script type="text/javascript">
    $(function() {
        var $otherLi = $('.sg-other-li');
        $otherLi.find('.sg-other').hide();

        $otherLi.parents('ul').find('li > input').change(function() {
            $option_list = $(this).parents('ul');
            $option_list.children('li.sg-other-li').each(function() {
                if ($(this).children('input').is(':checked')) {
                    $(this).find('.sg-other').show();
                } else {
                    $(this).find('.sg-other').hide();
                }
            })
        })
    });
</script>

Testing Time!

It's time to test your survey. Pull up your radio button question. You should only see your other option. Now click on the other option. Viola! Upon clicking you should see your other textbox pop up.

Considerations

This script works best if the associated question is on its own survey page. If a page reload is triggered (perhaps by an unanswered required question), the other text box will be hidden again and the respondent will be forced to re-select the answer option to show it.

Scripting and Other Custom Solutions

We’re always happy to help you debug any documented script that is used as is. That said, we do not have the resources to write scripts on demand or to debug a customized script.

If you have customization ideas that you haven't figured out how to tackle, we're happy to be a sounding board for Alchemer features and functionality ideas that might meet your needs. Beyond this, check out our Professional Services; these folks have the scripting chops to help you to achieve what you are looking for!

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual SurveyGizmo Enterprise*
*Excludes Stakeholder
Feature Included In