Fetching data from database using ajax and dataType:"json" to display in html form

Question

I have been trying this over night but I cant seem to make it work. I tired various methods to let the data values retrieved from the database to be displayed onto the form but none seem to work. When users click on the table row they should be able to see the data values they inserted for that particular row. This is basically a database where users can store vendor details and edit them when needed. Right now I am working on editing part.

This is my html form code Where the data is supposed to be displayed.

 <div id="VendorTable" class="VendorTable">
 <div id="vendorformedit" class="vendorformedit" >
 <i class="fa fa-expand"></i>
 <form id="form" name="form" method="POST" action="updatevendorlist.php" >
    <div id="formparttwo" >
    <h3>Other Information</h3><hr>

    <label>Category:</label>
    <input type="text" name="category" id="category" /><br/>
    <label>Notes:</label>
    <input type="text" name="remarks" id="remarks" /><br/><br/>

    <h3>2nd Contact Person</h3><hr>
    <label>Contact Person 2:</label>
    <input type="text" name="contactPerson2" id="contactPerson2"><br/>
    <label>Contact Number 2:</label>
    <input type="text" name="contact2" id="contact2"/><br/>

    <button type="submit" form="form" value="Submit"><i class="fa fa-plus-square fa-3x" aria-hidden="true"></i></button>
    </div> 

    <div id="formpartone">
    <h3>Vendor Details</h3><hr>

    <label>Vendor Name:</label>
    <input type="text" name="vendorName" id="vendorName"/><br/>
    <label>Vendor Address:</label>
    <input type="text" name="vendorAddress" id="vendorAddress"/><br/>
    <label>Vendor E-mail:</label>
    <input type="email" name="vendorEmail" id="vendorEmail"/><br/><br/>

    <h3>1st Contact Person</h3><hr>
    <label>Contact Person 1:</label>
    <input type="text" name="contactPerson1" id="contactPerson1" ><br/>
    <label>Contact Number 1:</label>
    <input type="text" name="contact1" id="contact1" /><br/>
    </div>
    </form>
</div><!--End vendorformedit Form-->
</div><!--End VendorTable Table-->

I need the data retrieved from the database to be displayed in the input textarea. The ultimate aim is for users to edit the data.

This is the javascript code using Ajax and dataType:Jason

     $(document).on("click", ".individualrow", function(){ 
       var id=$(this).attr("vendor_id");  
       if(confirm("Are you sure you want to retrieve this?"))  
       {  confirm(id);
            $.ajax({ 
                method:"POST",   
                url:"retrievevendorlist.php",  
                data:{id:id},  
                dataType:"json",  
                success:function(data){ 
                 $('#category').val(data.category);  
                 $('#remarks').val(data.remarks);  
                 $('#contactPerson2').val(data.contactPerson2);  
                 $('#contact2').val(data.contact2);  
                 $('#vendorName').val(data.vendorName);  
                 $('#vendorAddress').val(data.vendorAddress);  
                 $('#vendorEmail').val(data.vendorEmail);  
                 $('#contactPerson1').val(data.contactPerson1);
                 $('#contact1').val(data.contact1); 

                 }  
            });  
            $(".individualrow").addClass("form_one");
            $(".vendorformedit").addClass("hide_form");
       }   
  });

I am trying to retrieve the data from the database using the row id. I believe the code is working successfully in retrieving the data from the retrievevendorlist.php. However it is not displaying in the html form.

    <?php
    include("../LoginRegistrationSystem/connect.php");
    include("../LoginRegistrationSystem/functions.php");
    // attempt insert query execution
    if(isset($_POST['id'])){
    $sql = "SELECT * FROM vendor WHERE vendor_id = '".$_POST['id']."'";
    $result = mysqli_query($con, $sql);
    $row = mysqli_fetch_array($result);  
    echo json_encode($row);
    ?>

I am not sure where is the mistake. Kindly help me review and tell me where I am going wrong. Thank you in advance

did you try console.log(data) in success ? what is the output — shubham715, Jan 12 '18 at 04:45
Look here : [How to convert an array to object in PHP?](https://stackoverflow.com/a/1869147/2159528) — Louys Patrice Bessette, Jan 12 '18 at 04:49
Possible duplicate of [How to convert an array to object in PHP?](https://stackoverflow.com/questions/1869091/how-to-convert-an-array-to-object-in-php) — Louys Patrice Bessette, Jan 12 '18 at 04:52

score 0 · Answer 1 · answered Jan 12 '18 at 04:49

0

I notice you're retrieving the data from the database as an array and it might be getting encoded to a json array. Try accessing the data on the client side as follows

data[0].category

answered Jan 12 '18 at 04:49

Ali Kazmi

3,610
6
35
51

Hi @AliKazmi, $('.vendorformedit#category').val(data[10].category); Is this what you mean? category is in my 10th array in mysql database. I tried this and it doesnt work – alexvin Jan 12 '18 at 05:27
no, no, i meant, what you're returning from the server might be a json array for e.g. [{"category": 'abc',...}, {"category": 'def',...}], so you might be able to access the first row (probably the only row) using data[0] – Ali Kazmi Jan 12 '18 at 06:29
Ok. I got it thank you. Is there a way to amend the code? – alexvin Jan 12 '18 at 06:39

score 0 · Accepted Answer · answered Jan 12 '18 at 07:15

0

I managed to solve it. Thanks to those who helped.

I had to spell out all the data needed from database and also I used accoc instead of array.

answered Jan 12 '18 at 07:15

alexvin

41
7

Fetching data from database using ajax and dataType:"json" to display in html form

2 Answers2