使用从AJAX获取的值填充HTML

Question

I have an update button and on clicking it should give me values of the particular user. For this I have the following piece of code.

HTML Button:

<button onclick="return getUserDetails(<? echo $user['id']; ?>)" class="btn btn-xs btn-primary" data-toggle="modal" data-target=".update-modal">Update</button> 

In the following function I'm obtaining the details of the user.

Javascript Function:

function getUserDetails(userId, compId) {
$.ajax({
    type: "POST",
    url: "<? echo base_url(); ?>user/get_user_details", 
    data: {userId: userId,
           compId: compId
          },
        success: function(data){
          var text = JSON.parse(data); 
          console.log(text[0]);
        }
});
}

I want the above obtained user details to be populated in the following fields.

HTML Modal Code:

<div class="modal fade update-modal">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Update User</h4>
  </div>
  <div class="modal-body">
    <div class="form-group">
      <label for="email" class="sr-only">User First Name</label>
      <input type="text" class="form-control" name="userFName" id="userFName" value="" placeholder="User First Name"/>
    </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary" onclick="updateUser()">Save changes</button>
  </div>
</div><!-- /.modal-content -->

However I'm not able to obtain the desired result. Can someone help me?

Console.log is giving me the correct result however when I use document.write or innerHTML I do not see any values at all.

Answer 1

Thanks everyone. I sorted out the issue. I added the following changes to my code.

document.getElementById('user_f_name').value  = text[0].user_fname;
document.getElementById('user_l_name').value  = text[0].user_lname;
document.getElementById('user_email').value   = text[0].user_name;
document.getElementById('user_role').value    = text[0].user_role;