CODEWITHSUNDEEP
jqueryhtmlcss
Barry McDaid1982
Barry McDaid1982

Reputation: 157

Create a text box with a select option

I need to create a hidden text box that is made accessible when a user selects 'other'. here is my code. please advise

         <script>
   $('#sel').change(function() {
   $('#other').css('display', ($(this).val() == 'Other') ? 'block' :   'none');
    });
   });</script>
         <div class="form-group">
              <label class="control-label col-sm-2">Frequency:</label>
              <div class="col-xs-3">

              <select id="Regime" name="regime" class="form-control" required="">
                      <option value="" selected="" disabled="">Please select A regime...</option>
                      <option value="Once A Day">Once A Day</option>
                      <option value="BD">BD</option>
                      <option value="TDS">TDS</option>
                      <option value="QDS">QDS</option>
                      <option value="Other">Other (please specify)</option>
              </select>
              <input type="text" id="other" style="display: none;" />
              </div>
         </div>

Upvotes: 0

Views: 1297

Answers (3)

Mojtaba
Mojtaba

Reputation: 5002

You can do it by JavaScript. Here is the code (You may customize it):

<div class="form-group">
      <label class="control-label col-sm-2">Frequency:</label>
      <div class="col-xs-3">
      <select id="Regime" name="regime" class="form-control" required="" onchange="changeSelect(this.selectedIndex);">
              <option value="" selected="" disabled="">Please select A regime...</option>
              <option value="Once A Day">Once A Day</option>
              <option value="BD">BD</option>
              <option value="TDS">TDS</option>
              <option value="QDS">QDS</option>
              <option value="Other">Other (please specify)</option>
      </select>
      </div>
 </div>
<div class="form-group">
  <div class="col-xs-3" id="secondSelect">
  </div>
</div>

<script type="text/javascript">

var subOptions = new Array();
for(i=1;i<=4;i++){
  subOptions[i] = new Array();
}
//===Options for Once A Day:
subOptions[1][0]='Once A Day 1';
subOptions[1][1]='Once A Day 2';
subOptions[1][2]='Once A Day 3';


//===Options for BD:
subOptions[2][0]='BD 1';
subOptions[2][1]='BD 2';
subOptions[2][2]='BD 3';


//===Options for TDS:
subOptions[3][0]='TDS 1';
subOptions[3][1]='TDS 2';
subOptions[3][2]='TDS 3';


//===Options for QDS:
subOptions[4][0]='QDS 1';
subOptions[4][1]='QDS 2';
subOptions[4][2]='QDS 3';


function changeSelect(which){
  alert(which);
  switch(which.toString()){
    case '5':
      result='<input name="regimeOption" class="form-control" />';
      break;

    case '0':
      result = 'Please select A regime...';
      break;

    default:
      result='<select name="regimeOption" class="form-control" />';
      for(i=0;i<subOptions[which].length;i++){
        result+='<option value="'+subOptions[which][i]+'">'+subOptions[which][i]+'</option>';
      }
      result+='</select>';
      break;
  }
  document.getElementById('secondSelect').innerHTML = result;

}



</script>

Upvotes: 0

StillLearningGuy
StillLearningGuy

Reputation: 50

You make it display:none; in css, then use jQuery to show it when the user selects other.

<style type="text/css">
#textbox{
display: none;
}
</style>
<script type="text/javascript>
$('#Regime').change(funtion(){
if($('#Regime').val() == 'Other'){
$('#textbox').show();
}
});
</script>

But don't forget to link jQuery as well. This goes between your head tags...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Upvotes: 1

Tom Dyer
Tom Dyer

Reputation: 452

Create your text field and use

$('#otherTextbox').hide();

$('#Regime').on('change', function(){
    if( $(this).val() == 'other' ){ $('#otherTextbox').show();
    }
    else {
        $('#otherTextbox').hide();
    }
});

Upvotes: 0

Related Questions