CODEWITHSUNDEEP
javascriptjqueryhtml
turing042
turing042

Reputation: 99

Trouble populating input textbox after selecting dropdown option

I want to populate some input fields based on the options selected by the User via a dropdown menu.

HTML of the drop down menu:

 <label>Select a Template </label>
 <select name="mailTemplates" class="form-control">
 <option id="placeOrder" value="">Place Order</option>
 <option id="cancelOrder" value="">Cancel Order</option>
 <option id="reqInfo" value="">Request Information</option>
 <option value="" disabled selected>-- Select a Mail Template --</option>
 </select>


<label>Subject</label>
<input id="subject" class="form-control " type="text" name="subject" placeholder="Subject of your email"/>

JQuery for click function:

$(document).ready(function(){
$("#placeOrder").on('click', function(){
            $("#subject").val("Test Subject");
        });
});

When the user selects the "Place Order" option, it should populate the #subject input box with "Test Subject".

Upvotes: 0

Views: 39

Answers (1)

Mamun
Mamun

Reputation: 68933

You can check the id of the selected option along with change() like the following:

$(document).ready(function(){
  $("#mailTemplates").change(function(){
    var optionId = $("option:selected", this).attr('id');
    if(optionId == 'placeOrder'){
      $("#subject").val("Test Subject");
    }
    else
      $("#subject").val("");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select a Template </label>
  <select name="mailTemplates" id="mailTemplates" class="form-control">
  <option id="placeOrder" value="">Place Order</option>
  <option id="cancelOrder" value="">Cancel Order</option>
  <option id="reqInfo" value="">Request Information</option>
  <option value="" disabled selected>-- Select a Mail Template --</option>
</select>


<label>Subject</label>
<input id="subject" class="form-control " type="text" name="subject" placeholder="Subject of your email"/>

Upvotes: 1

Related Questions