JSON usage while autofill the form when user changes the category

Question

i'm trying to fill the form with database information when user changes the category(select tag changes). here is my code.

<form onsubmit='return false'>
select<select id="select">
       <option value='5'>5</option>
       <option value='6'>6</option>
       <option value='7'>7</option>
       <option value='8'>8</option>
       <option value='9'>9</option>
       <option value='10'>10</option>
       </select>
       fname<input type="text" id='fname' name="fname" /><br />
       lname<input type="text" id='lname' name="lname" /><br />
</form>


<script type="text/javascript">

$(document).ready(function(){
    $("#select").change(function(){
        selectid = $(this).val();
          // using post method to get firstname   
                     $.post("retreive.php", {selectid:selectid}, function(result){
                            $("#fname").val();
                            //again using post method here get lastname
                           $.post("one.php", {selectid:selectid}, function(result){
                             $("#lname").val();

                           });
                      });   
     });    
});

retreive.php

<?php
//for firstname
if( isset($_POST['selectid']) ){
     //using this selectid i'm getting firstname
     echo $firstname;
     exit();
}

//again for last name
if( isset($_POST['selectid']) ){
     //using this selectid i'm getting firstname
     echo $lastname;
     exit();
}
?>

Finally this procedure auto filling the form fields i.e; firstname and lastname. I know this is foolish and time taken procedure. I've heard that this work done easily and no need to make our php bare all that burden with using the concept of JSON. I have tried to understand but couldn't. I hope you guys can understand the problem i'm facing, hoping for a solution. Thanks in advance!

Answer 1

You are made ajax request, but do nothing with result data.
Try this

$(document).ready(function(){
    $("#select").change(function(){
       var selectid = $(this).val();
          // using post method to get firstname   
                     $.post("retreive.php", {selectid:selectid}, function(result){
                            $("#fname").val(result);
                            //again using post method here get lastname
                           $.post("one.php", {selectid:selectid}, function(result){
                             $("#lname").val(result);

                           });
                      });   
     });    
});

You don't need two ajax requests - you can make one request, and get json data.
Read about jquery ajax method and json format

$(function(){
 $('#select').change(function(){
 var selectid = $(this).val();
 $.ajax({
  url: 'retreive.php',
  data: {selectid: selectid},
  type: 'POST',
  dataType: 'JSON',
  success: function(data)
  {
    $("#fname").val(result.fname);
    $("#lname").val(result.lname);
  }
});
});
});

And php

<?php
 if (isset($_POST['selectid'])) {
  echo json_encode(array('fname' => $fname, 'lname' => $lname));
  exit;
 }

And if something goes wrong, when you made ajax request, open console, and find errors. If you have no errors, go for the network and see what server returns you.