Json response to HTML values AJAX

Question

I am trying to set action.php response to HTML fields via AJAX.i am calling ajax and trying to fetch data from database (action.php) and set it to HTML fields.

Here is my code :

action.php :

 $arr_data=array();

while($row = mysql_fetch_assoc($result))
{
$arr_data['image1'] = $row['name'];
$arr_data['web_name'] = $row['web_name'];
$arr_data['web_link'] = $row['web_link'];
$arr_data['linked_img'] = $row['linked_img'];
$arr_data['description'] = $row['description'];

 }
 echo json_encode($arr_data);

AJAX CALL :

     $.ajax({
   url:"getchange.php",
   method:"POST",
   data:{image_id:image_id},
      success:function(data)
      {

     var obj = JSON.parse(this.data);
     alert("obj");
      // $('#name').val(obj.web_name);
      // $('#name').val("update");
    }
    })

HTML :

   <div id="imageModal" class="modal fade" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Add Website</h4>
   </div>
   <div class="modal-body">
    <form id="image_form" method="post" enctype="multipart/form-data">
     <p><label>Name : </label>     <input type="text" name="name" id="name"  />
      </p>
     <p><label>Select Linked Image</label>
     <input type="file" name="image" id="image" /></p><br />
    <p><label>Add Link</label>
     <input type="text" name="link" id="link" /></p><br />
         <p><label>Add Image</label>
     <input type="file" name="image2" id="image2" /></p><br />

          <p><label>Add Description</label>
     <textarea name="desc" rows="10" cols="50" id="desc" ></textarea></p><br />
     <input type="hidden" name="action" id="action" value="insert" />
     <input type="hidden" name="image_id" id="image_id" />
     <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-info" />

    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>

What i wanted to achieve is that : i can fetch database row via ajax and set values="row record" to HTML fields . Thanks in advance

Answer 1

first you should change your url:"getchange.php" to url:"action.php" in Ajax code because you're processing data on action.php so you should post data to this file. and second I assumed that you wanna insert data into some input forms like this in index.html or whatever you want:

    <input type="text" name="name">
    <input type="text" name="web_name">
    <input type="text" name="web_link">
    <input type="text" name="linked_img">
    <input type="text" name="description">

and here is the action.php file :

<script>
$('document').ready(function() {
 $.ajax({
   url: "getchange.php",
   method: "GET",   
   success: function(data) {
   data = JSON.parse(data);
   console.log(data);
     document.getElementByName('name').value = data.image1;
     document.getElementByName('web_name').value = data.web_name;
     document.getElementByName('web_link').value = data.web_link;
     document.getElementByName('linked_img').value = data.linked_img;
     document.getElementByName('description').value = data.description;

   }
 })
});
</script>

as you can see for example data.image1 is what you are pass from action.php.and you also should use GET method because you are not posting any data. you are just retrieving some data.

Hope be useful and have great positive time ^_^