Javascript show/hide text field input if 'Other' selected in multiple select input

Question

I'm afraid I'm stuck and I was hoping for a some community wisdom.

I am building an HTML form which submits data to a SQL database. One of the form fields is a multiple select input field where users can select the type of operation being performed. The array then gets exported to a SQL field as comma-separated values.

The issue I'm having is that I also want users to be able to enter a custom operation type if it is not included in the provided list. Ideally this would involve selecting 'Other' in the multiple select and having a new text input field appear.

So far I can only make the text input field appear if the user has selected 'Other' and nothing else. Can I have the field appear if the user has selected multiple items, one of which is 'Other'?

Many thanks

function showfield(episode_procedure){
          if(episode_procedure=='Other')document.getElementById('otherprocedure').innerHTML='Other: <input type="text" name="episode_otherprocedure" style="width: 450px;"/>';
          else document.getElementById('otherprocedure').innerHTML='';
        }

   
<select multiple="multiple" data-placeholder="Click to select..." size="7" name="episode_procedure[]" style="width: 450px;" onchange="showfield(this.options[this.selectedIndex].value)"></p>
        <option value="anterior resection">anterior resection</option>
        <option value="appendicectomy">appendicectomy</option>
        <option value="Other">Other</option></select>
        
        <div id="otherprocedure"></div>

Your code is working .It was created the input click with others .Then what you are expecting? — prasanth
– prasanth, Commented Nov 5, 2016 at 4:54
@prasad, the code isn't working when you select multiple items from the select box. You can check my answer for example of how to do it with jquery. — Dekel
– Dekel, Commented Nov 5, 2016 at 16:36

Dekel · Accepted Answer · 2016-11-05 04:23:13Z

Using jQuery it's very easy to get all the values in a multiple select tag:

$(select).val()

Now you only need to check if the 'Other' exists inside:

$(select).val().indexOf('Other') > -1

$('#s1').on('change', function() {
  if ($(this).val().indexOf('Other') > -1) {
    $('#otherprocedure').html('Other: <input type="text" name="episode_otherprocedure" style="width: 450px;"/>')
  } else {
    $('#otherprocedure').html('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1" multiple="multiple" data-placeholder="Click to select..." size="7" name="episode_procedure[]" style="width: 450px;">
<option value="anterior resection">anterior resection</option>
<option value="appendicectomy">appendicectomy</option>
<option value="Other">Other</option></select>

<div id="otherprocedure"></div>

Collectives™ on Stack Overflow

Javascript show/hide text field input if 'Other' selected in multiple select input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related