Populating form with JSON data

Question

I need to populate the form with generated JSON data. Page rangen.php generates an array called $student and then encodes it as JASON.

<?php

// Randomly generate data for a student and return it as JSON data

// possible random first names
$firstname = array("Kevin", "John", "Sally", "Larissa", 
                   "Zhang", "Li", "Ying", "Wang",
                   "Nayla", "Nawal", "Abdul", "Yasin");

// possible random last names
$lastname = array("Browne", "Black", "Smith", "Yendt",
                  "Wei", "Fang", "Patel", "Lee",
                  "Abaza", "Shadid", "Hatem", "Hassin");

// random generation of tuition
$tuition = rand(2800, 7956);

// random generation of a student id
$studentid = 
  "0" . rand(0, 9) . rand(0,9) . rand(0,9) . rand(0,9) .
  rand(0,9) . rand(0,9) . rand(0,9) . rand(0,9);

// possible payment methods
$paymentmethods = array("Credit", "Debit", "Bitcoin");

// create random student based on arrays, randomness
$student = 
  array(
    "firstname" => $firstname[rand(1,count($firstname)) - 1],
    "lastname" => $lastname[rand(1, count($lastname)) - 1],
    "tuition" => $tuition,
    "studentid" => $studentid,
    "method" => $paymentmethods[rand(1, count($paymentmethods)) - 1]
  );

// send back a student as JSON data
echo json_encode($student);

?>

The page form.php makes an AJAX request to rangen.php using $.post() it then should set the forms to generated values I'm using .val() to do this. Clicking Random button calls the function.

$(document).ready( function () {
            $("#rand").click(
                function () {
                    var student = $.post("rangen.php", {"firstname" : "$firstname", "lastname" : "$lastname",
                            "tuition" : "$tuition", "studentid" : "$studentid", "method" : "$paymentmethods"},
                        function(data){
                            for(/*subject in data*/var i=0; i<data.length; i++){
                                $("#name1").val(data[0]);
                                $("#name2").val(data[1]);
                                $("#id_1").val(data[3]);
                                $("#tuition_1").val(data[2]);
                                $("#payment_1").val(data[4]);
                            }
                        },
                        "json"); //Stores the requested JSON data.

                    console.log(student);
                }
            )
        }
    );

Using console.log() shows that the request went through, but when I try to set the form values nothing happens.

<form action="form.php" method="post" id="payment_form">
    First Name <br>
    <input type="text" name="fname" id="name1"> <br>
    Last Name <br>
    <input type="text" name="lname" id="name2"> <br>
    Student ID <br>
    <input type="text" name="student_id" id="id_1"> <br>
    Tuition <br>
    <input type="text" name="tuition" id="tuition_1"> <br>
    Payment Method <br>
    <select name="payment" id="payment_1">
        <option value="Credit">Credit</option>
        <option value="Debit">Debit</option>
        <option value="Bitcoin">Bit Coin</option>
    </select> <br>

    <input type="submit" value="Submit">
    <input type="button" value="Random" id="rand">
    <input type="button" onclick="log()" value="Log">
</form>

Answer 1

In this case data is an associative array which need to be accessed by data["studentid"] or data.studentid , there's no need for the for loop.

$(document).ready( function () {
            $("#rand").click(
                function () {
                    var student = $.post("rangen.php", {"firstname" : "$firstname", "lastname" : "$lastname",
                            "tuition" : "$tuition", "studentid" : "$studentid", "method" : "$paymentmethods"},
                        function(data){
                            //for(/*subject in data*/var i=0; i<data.length; i++){
                                $("#name1").val(data["firstname"]);
                                $("#name2").val(data["lastname"]);
                                $("#id_1").val(data["studentid"]);
                                $("#tuition_1").val(data["tuition"]);
                                $("#payment_1").val(data["method"]);
                             //}
                        },
                        "json"); //Stores the requested JSON data.

                    console.log(student);
                }
            )
        }
    );