使用从AJAX获取的值填充HTML

时间:2015-10-04 17:25:03

标签: javascript php ajax

我有一个更新按钮,点击它应该给我特定用户的值。为此,我有以下代码。

HTML按钮:

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

在以下功能中,我获取用户的详细信息。

Javascript功能:

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]);
        }
});
}

我希望在以下字段中填充上面获得的用户详细信息。

HTML模式代码:

<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 -->

但是我无法获得所需的结果。有人能帮我吗?

Console.log正在给我正确的结果,但是当我使用document.write或innerHTML时,我根本看不到任何值。

1 个答案:

答案 0 :(得分:0)

谢谢大家。我解决了这个问题。我在代码中添加了以下更改。

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;