Displaying value in textbox for to edit using ajax and php - php

Question

editModal.php
<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<i class="glyphicon glyphicon-edit"></i> Edit Profile
</h4>
</div>
<div class="modal-body">
<div id="modal-loader" style="display: none; text-align: center;">
</div>
<div id="dynamic-content">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>First Name</th>
<td id="txt_first">
<input id="result_table" type="text" class="form-control" name="Firstname" ng-model="name">
</td>
</tr>
<tr>
<th>Middle Name</th>
<td id="txt_middle" > </td>
</tr>
<tr>
<th>Last Name</th>
<td id="txt_last"></td>
</tr>
<tr>
<th>Email Add</th>
<td id="txt_emailadd"></td>
</tr>
<tr>
<th>Contact Number</th>
<td id="txt_cnumber"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" value="send" name="submit" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- /.modal -->
</div>
$(document).on('click', '#getUser', function(e){
e.preventDefault();
var uid = $(this).data('id'); // get id of clicked row
$('#dynamic-content').hide(); // hide dive for loader
$('#modal-loader').show(); // load ajax loader
$.ajax({
url: '../model/editUser.php',
type: 'POST',
data: 'id='+uid,
dataType: 'json'
})
.done(function(data){
console.log(data);
$('#dynamic-content').hide(); // hide dynamic div
$('#dynamic-content').show(); // show dynamic div
$('#txt_first').html(data.First_Name);
$('#txt_middle').html(data.Middle_Name);
$('#txt_last').html(data.Last_Name);
$('#txt_emailadd').html(data.Email_Add);
$('#txt_cnumber').html(data.Contact_Number);
$('#modal-loader').hide(); // hide ajax loader
})
.fail(function(){
$('.modal-body').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
});
});
});
</script>
I wanted to display the value of the $('#txt_first').html(data.First_Name); on the input type="text" value = "php echo $firstName " But it seems that I'm doing it wrong. Is it possible for me to enclosed the table and the script in a ; segment?

Answer 1

It is input field so you need to do it with 'value' not 'html'. try this:
$('#txt_first').val(data.First_Name);

Answer 2

Created demo to display data.First_Name in input type ="text"
$('#result_table').val("test");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th>First Name</th>
<td id="txt_first">
<input id="result_table" type="text" class="form-control" name="Firstname" ng-model="name">
</td>
</tr>
<tr>
<th>Middle Name</th>
<td id="txt_middle" > </td>
</tr>
<tr>
<th>Last Name</th>
<td id="txt_last"></td>
</tr>
<tr>
<th>Email Add</th>
<td id="txt_emailadd"></td>
</tr>
<tr>
<th>Contact Number</th>
<td id="txt_cnumber"></td>
</tr>
</table>