Value passing combobox to textarea of same page

Question

Today I got one interesting problem. I am working on SMS management so I have one dropdown to select template , after selecting template the same text should be apear on message body which is a text area and it is in the same jsp page. Some of my friends suggest me to do in Ajax but I dont know Ajax can any help me to solve this . Here is my select and textare elements.

<select class="selectpicker form-control"name="grade" data-style="btn-primary">
    <option></option>
    <c:forEach var="grade" items="${gradeInfo}">
        <option value="${grade.getDropDownName()}">
            ${grade.getDropDownName()}
        </option>
    </c:forEach>
</select>

<div class="input-group input-group-lg" >
    &nbsp;&nbsp; <span class="input-group-addon">Message</span>
    <textarea class="form-control " rows="6" placeholder="Message" 
        style="height: auto;" id="MessageBox">
    </textarea>
</div>

Here dorpdown values come from database . If I select one value the same text should apear on textarea. Please Help me in this.

Answer 1

Try this one using jquery

use can use JQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

CODE

<script type="text/javascript">
$(document).ready(function() {

    $('select').change(function () {
        $('#MessageBox').val($(this).find('option:selected').text())
    });
});
</script>

Working Demo

If you want to load any template on the select within a div Try this

<script type="text/javascript">
$(document).ready(function() {

   $('select').change(function () {

    $.ajax({
    url: "some_server_action",
    type: "post",
    dataType: "json",
    data: null,
    async: false,
    success: function(data) {
    console.log('success');
            $('#MessageBox').val($(this).find('option:selected').text());
            $('#replace').html(data);   
    },
    error:function(){
          console.log('failure');
    }
    });
   });

});
</script>

Answer 2

Here is a workaround :

If you put the ID/name of the template or something (the url) to identify the template in your database in the value of the select options.

HTML

 <select class="selectpicker form-control"name="grade" data-style="btn-primary">
 <option></option>
 <c:forEach var="grade" items="${gradeInfo}">
     <option value="${grade.getDropDownName()}">
         ${grade.getDropDownName()}
     </option>
 </c:forEach>
 </select>


<div class="input-group input-group-lg" >
    &nbsp;&nbsp; <span class="input-group-addon">Message</span>
    <textarea class="form-control " rows="6" placeholder="Message" 
        style="height: auto;" id="MessageBox">
    </textarea>
</div>

Javascript

function updateTemplate(this) {
    $.ajax({
        url: "/template?name="+this.value
    }).done(function(data) {
        $( "#MessageBox").html(data);
    });
}

This probably need some work to fill your need but you can start here and check the doc of JQuery about ajax : Here