How to Pass Value of my Query to input fields using AJAX

Question

im Very new on using AJAX. im using Codeigniter my question is how can i get the value of my query and put it on the input fields. i have created some but all i can do is to alert them.

Model

public function getguarantordata($id,$gid){ 
   $array = array('ClientID' => $id, 'GuarantorID' => $gid);
        $query =  $this->db->where($array)->get('tblguarantor');          
        return $query->result();
    }

View

<h3>Guarantor Information</h3>
    <div>
     <input type="text" id="clientID" class="hide" value="<?php echo $this->session->loginid; ?>" > //temporary im using this to get the ID of the Client
   </div>
    <div class="form-group row ">
    <label for="" class="col-md-1">Previous Guarantor</label>
    <div class="col-md-3">
     <select class  = "form-control" id = "selectedvalue">   
      <option value="default">Default</option>
     <?php foreach ($guarantordata as $row): ?>      
     <?php echo '<option value = "'. $row->GuarantorID.'">' .$row->GuarantorFirstName. '</option>' ?>    //getting the ID of The Guarantor  
        <?php endforeach ?>
        </select>
     </div>
     <div class="col-md-3 btn btn-success" id="selectedG">Choose as Guarantor </div>
    </div>

    <div class="form-group row">
     <label for="" class="col-md-1 col-form-label">First Name</label>
     <div class="col-md-3"><input type="text" class="form-control" value =""></div>

     <label for="" class="col-md-1 col-form-label">Middle Name</label>
     <div class="col-md-3"><input type="text" class="form-control" value =""></div>

Controller

 function Getgdata($id,$gid){
   $guarantordata = $this->Model_user->getguarantordata($id,$gid);
  foreach ($guarantordata as $row){

  $data1 = array(

'GuarantorFirstName' => $row->GuarantorFirstName,
'GuarantorMiddleName' => $row->GuarantorMiddleName,



  );
 }

  echo var_dump($guarantordata); //i just want to view the result.
 }

Javascript this is my javascript code.

  var home = "http://localhost/";
  $('#selectedG').on('click', function(e){  
var test = $('#selectedvalue').val();
var cid = $('#clientID').val();

           e.preventDefault();          
                $.ajax({  
                     url: home + "Getgdata/" + cid+"/" + test,                         
                     method:"POST",  
                     data:this,  
                     contentType: false,  
                     cache: false,  
                     processData:false,  
                     success:function(data)  
                     {  

                         alert(data);
                     }  
                });  

      }); 

the idea here is i want to get the data of my query which i run in controller.. and that data for example "GuarantorFirstName" will be pass on Firstname field found in View.

Answer 1

instead of var_dump data, return a json response from controller then you can access values easily from js.

function Getgdata($id,$gid){
  $guarantordata = $this->Model_user->getguarantordata($id,$gid);
  foreach ($guarantordata as $row){

      $data1 = array(
              'GuarantorFirstName' => $row->GuarantorFirstName,
              'GuarantorMiddleName' => $row->GuarantorMiddleName);
      }
      // return json response 
      header('Content-Type: application/json');
      echo json_encode($data1);
 }

now from ajax responce you can access them easily

 $.ajax({  

     url: home + "Getgdata/" + cid+"/" + test,                         
     method:"POST",  
     dataType: 'json', //set data type to json
     data:this,  
     contentType: false,  
     cache: false,  
     processData:false,  
     success:function(data)  {  
         alert(data.GuarantorFirstName);
         alert(data.GuarantorMiddleName);
     }  
});