CODEWITHSUNDEEP
jqueryselect
porsche
porsche

Reputation: 55

show hidden field when "Other" option in select tag is selected

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());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

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

Upvotes: 0

Views: 910

Answers (3)

Nick Parsons
Nick Parsons

Reputation: 50834

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.val("");
      $otherField.show();
    } else {
      $otherField.hide();
      $otherField.val(this.value);
    }
  });
});
#field0 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

<input id="field0" value="" />

Upvotes: 2

Mihai T
Mihai T

Reputation: 17697

I made a bit of refactoring to your code.

It's very easy to check what value/text has the selected option and hide/show the input according to that

const input = $('#field0');
$("#selectNo").on('change', function() {
  const selectedOptionText = $(this).find('option:selected').text();

  input.val(selectedOptionText);
  selectedOptionText === 'Other' ? input.show() : input.hide();
})
#field0 {
 display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

<input id="field0" value="" />

Upvotes: 0

BOZ
BOZ

Reputation: 2020

You can add show() & hide() when selected text "Other".

$(function() {
  $('#selectNo').val($('#selectNO option:selected').val());
  $('#field0').hide();
  $('#selectNo').bind('change', function() {
    $('#field0').val($('#selectNo option:selected').text());
    if ($('#selectNo option:selected').text() == "Other")
      $('#field0').show();
    else $('#field0').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

<input id="field0" value="" />

Upvotes: 0

Related Questions