jquery - How to populate textbox from bootstrap modal after ajax response appended to bootstrap modal -
whenever click on go button data fetch data database loads table inside bootstrap modal using ajax after loading data how populate textbox selecting data in bootstrap modal
<div class="modal fade" id="mymodal1" role="dialog"> <div class="modal-dialog"> modal content <div class="modal-content"> <div class="modal-header"></div> <div class="modal-body"> <table id="records_table"> <tbody id="values"> <tr> </tr> </tbody> </table> </div> <div class="modal-footer"></div> </div> </div> </div>
script
$(document).ready(function() { $('#getreferenceid').click(function() { var selectedclass = $("#classname option:selected").val(); var selectedexamtype = $("#examtype option:selected").val(); if (selectedclass === ""&& selectedexamtype === "") { alert('please select above 2 dropdowns'); } else { alert(selectedclass); alert(selectedexamtype); $.ajax({ type : 'post', url : 'searchstudenttoeditmarks', datatype : 'json', data : { classname : $("#classname option:selected").val(), examtype : $("#examtype option:selected").val() }, success : function(data,success) { alert(success); console.log(data) $.each(data,function(index) { $('<tr>').append($('<td>').text(data[index])).appendto('#records_table'); }); $('#mymodal1').modal('show'); $("#values tbody td").on('click',function() { $("#studentreferencid").val($(this).text()); $("#mymodal1").modal('hide'); }) }, }); } }); });
textbox
<input type="text" class="form-control" name="studentreferenceid" id="studentreferencid" autocomplete="off" /> <button type="button" class="btn btn-default" data-id="row-1302" data-toggle="modal" data-target="#mymodal1" class="btn btn-danger use-address2" style="height: 2em;" id="getreferenceid">go</button>
Comments
Post a Comment