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

Are you trying to update 1 or more existing rows in HTML, or are you wanting to add new row(s) with the AJAX response data using a template for a row ? If you have the HTML that would be helpful. If you use a dataType of json in your AJAX I don't think you have to parse the response. It will be json. — SScotti
– SScotti, Commented Jun 22, 2019 at 16:24
i am trying to work on "update button" using HTML models . so , if someone click on Update button , it opens this model but i want to place data as well , when someone is updating records . — Awais Arshad
– Awais Arshad, Commented Jun 22, 2019 at 16:29
You can iterate through a simple object with for (let [key, value] of Object.entries(jsonresponse)) { console.log(key, value); }. If you are trying to set the form values programmiaically that may be a problem with the input type="file". If you want to create a new element that is not a form you could do that and just summarizes your data you could do that. See this also: stackoverflow.com/questions/42777779/… — SScotti
– SScotti, Commented Jun 22, 2019 at 16:48

UnrivaledIr · Accepted Answer · 2019-06-22 16:46:32Z

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

edited Jun 22, 2019 at 16:46

answered Jun 22, 2019 at 16:14

UnrivaledIr

2,1761 gold badge22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Awais Arshad Over a year ago

Hy thank you very much for your answer but it is not working for me . 1. changed to action.php 2. also when i try to do this "alert(data.web_link);" it is saying undefined

UnrivaledIr Over a year ago

@MuneebQureshi I tested the code on my localhost and it works great but I filled the array $arr_data with some fake data. don't forget to use data = JSON.parse(data); and console.log(data) . hope work ^_^

Ali Qorbani Over a year ago

I think you have to add another parameter to your ajax call dataType=html it may be worked. Im not tested it yet.

Collectives™ on Stack Overflow

Json response to HTML values AJAX

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related