show hidden field when “Other” option in select tag is selected

manpreet Best Answer 3 years ago

input field with id = field0 is a hidden field but still gets value from select, but when user select "Other", input text field0 will appear.

$(function() {
  $('#selectNo').val($('#selectNO option:selected').val());

  $('#selectNo').bind('change', function() {
    $('#field0').val($('#selectNo option:selected').text());
  });
});

 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
 id="selectNo">
  <option value="" selected="selected">-- Please Select --option>
  <option value="one">Oneoption>
  <option value="two">Twooption>
  <option value="three">Threeoption>
  <option value="other">Otheroption>


 id="field0" value="" style="display:none;"/>

manpreet 3 years ago

You can initially hide your textbox by using css's display: none property on the id #field0. Then, within your jQuery, you can use a if statment to check whether the option with the value other has been selected, and if it has you can display the textbox using the .show() method, otherwise, if the other option is not selected you can hide it using the .hide() method.

See example below:

$(function() {
  $otherField = $("#field0");
  $('#selectNo').on('change', function() {
    if(this.value === 'other') {
      $otherField.show();
    } else {
      $otherField.hide();
    }
    $otherField.val(this.value);
  });
});

#field0 {
  display: none;
}

 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
 id="selectNo">
  <option value="" selected="selected">-- Please Select --option>
  <option value="one">Oneoption>
  <option value="two">Twooption>
  <option value="three">Threeoption>
  <option value="other">Otheroption>


 id="field0" value="" />