CODEWITHSUNDEEP
javascriptphpjqueryhtml
Barry McDaid1982
Barry McDaid1982

Reputation: 157

Text box in select option for web app

I am building a web app that is used to select drugs and details associated with drugs. There are some sections that allow for options, but the 'other' option requires the input of text as opposed to selecting one of the other options. I am trying to add a text box after a 'other' option is selected.

Here is the entire code that I have been working on. I have tried using javascript and some jquery, but I am unable to get it to work. Any help would be great please. 

                 <div class="form-group">
                  <label class="control-label col-sm-2">Route:</label>
                  <div class="col-xs-3">
                  <select id="Quantity" name="quantity" class="form-control" required="">
                          <option value="" selected="" disabled="">Please select A dosage...</option>
                          <option value="PO">PO</option>
                          <option value="IV">IV</option>
                          <option value="PR">PR</option>
                          <option value="Topically">Topically</option>
                          <option value="other">Other (please specify)</option>
                    </select>
                    </div>
                 </div>

               <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>
                  </div>
             </div>



             <div class="form-group">
                  <label class="control-label col-sm-2">Date of Prescription:</label>
                  <div class="col-xs-3">
                  <input class="form-control" type="date" name="prescription" placeholder="(yyyy-mm-dd)" required>
                  </div>
             </div>

Upvotes: 0

Views: 261

Answers (1)

ggg
ggg

Reputation: 1192

Look please this jsfiddle example

$('textarea').hide();
$('#Quantity').change(function()
    {
        var o = $(this).find('option:selected').val();
        console.log(o);
        if(o=='other') $('textarea').show(); 
});

So here are some explanations :

$('textarea').hide(); // hide the textarea by default

$('#Quantity').change(function(){  }); // when the user select an option in the #quantity select tag

var o = $(this).find('option:selected').val(); // get the current value of the option selected

if(o=='other') $('textarea').show(); // if the variable o is equal to "other" then show the textarea

Upvotes: 2

Related Questions