How to Display a Hidden Textarea When Selecting "Other" from a Dropdown in HTML

How to Display a Hidden Textarea When Selecting "Other" from a Dropdown in HTML

If you've ever created a form for a website, you know how important it is to ensure that users can provide the information they need without cluttering the interface. One common scenario is offering users a dropdown list of options while also allowing them to specify something not covered by those options. This is where the "Other" option comes in handy, often paired with a hidden textarea that only appears when needed.

In this blog post, we'll walk you through how to implement this functionality using both plain JavaScript and jQuery. By the end of this post, you'll be able to create a dynamic form element that enhances user experience and keeps your form tidy.

Step 1: The HTML Structure

First, let's create the basic structure of our form. Here's a simple HTML snippet that includes a select box and a hidden textarea:

<label for="options">Choose an option:</label>
<select id="options">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="other">Other</option>
</select>
<textarea id="otherText" style="display:none;" placeholder="Please specify..."></textarea>

In this example, we have a select dropdown with three options: "Option 1," "Option 2," and "Other." The textarea, which prompts the user to "Please specify," is hidden by default (display:none;).

Step 2: Using JavaScript to Show/Hide the Textarea

Next, we'll use JavaScript to display the hidden textarea when the user selects the "Other" option.

document.getElementById('options').addEventListener('change', function() {
    var otherText = document.getElementById('otherText');
    if (this.value === 'other') {
        otherText.style.display = 'block';
    } else {
        otherText.style.display = 'none';
    }
});

Step 3: Achieving the Same Result with jQuery

If you're working on a project that already includes jQuery, you can implement the same functionality more concisely:

$(document).ready(function() {
  $('#options').change(function() {
    if ($(this).val() === 'other') {
      $('#otherText').show();
    } else {
      $('#otherText').hide();
    }
  });
});

 Live Js demo Available

The Challenge

When dealing with multiple select boxes, each with an "Other" option and a hidden textarea, you might be tempted to write individual scripts for each pair. However, this approach quickly becomes unwieldy as the number of select boxes increases. Instead, we'll create a more efficient solution using classes and data attributes.

Step 1: The HTML Structure

First, let's set up our HTML with multiple select boxes. We'll use classes and data attributes to link each select box with its corresponding textarea:

<div class="input-group">
  <label for="options1">Choose an option:</label>
  <select class="options" id="options1" data-target="#otherText1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="other">Other</option>
  </select>
  <textarea id="otherText1" style="display:none;" placeholder="Please specify..."></textarea>
</div>
<div class="input-group">
  <label for="options2">Choose another option:</label>
  <select class="options" id="options2" data-target="#otherText2">
    <option value="optionA">Option A</option>
    <option value="optionB">Option B</option>
    <option value="other">Other</option>
  </select>
  <textarea id="otherText2" style="display:none;" placeholder="Please specify..."></textarea>
</div>

Step 2: The JavaScript Solution

To make the form dynamic, we can write a single JavaScript function that works with all the select boxes:

document.querySelectorAll('.options').forEach(function(selectElement) {
    selectElement.addEventListener('change', function() {
        var targetTextarea = document.querySelector(this.getAttribute('data-target'));
        if (this.value === 'other') {
            targetTextarea.style.display = 'block';
        } else {
            targetTextarea.style.display = 'none';
        }
    });
});

Step 3: Using jQuery for a More Concise Solution

If your project uses jQuery, you can achieve the same result with even less code:

$(document).ready(function() {
  $('.options').change(function() {
    var targetTextarea = $($(this).data('target'));
    if ($(this).val() === 'other') {
      targetTextarea.show();
    } else {
      targetTextarea.hide();
    }
  });
});

Live Js for Dynamic Code