Using AJAX to populate a form with data pulled from mysql database

Question

I'm trying to populate a form with data automatically when a gymnast is selected from a dropdown box. I understand that I need to use AJAX, and have tried - however my Javascript is terrible so low and behold; my code is abysmal.

ajax_populate_gymnasts.php:

<?php 
require('../includes/dbconnect.php');
$gymnastid = $_POST['gymnast'];

$sql = "SELECT * FROM gymnasts WHERE id='$gymnastid'";
   $result = mysqli_query($GLOBALS['link'], $sql);
$msg ='';
    if (mysqli_num_rows($result) > 0){
        foreach($result as $row)
        {
          //Change to populate fields on form with data.
       echo ($row);
        }
    }
    else{
        $msg .="<option>No Gymnasts were found!</option>";
        echo ($msg);
    }
    mysqli_close($GLOBALS['link']);

?>

 function getGymnasts(val){ $.ajax({ type:"POST", url:"ajax_populate_gymnasts.php", data: 'gymnast='+val, success: function(data){ $("#dob").value(data['dob']); $("#gender").value(data['gender']); $("#parent").value(data['parent']); $("#email").value(data['email']); $("#phone").value(data['phone']); $("#address").value(data['address']); $("#status").value(data['status']); } }); } 

 <?php require('adminheader.php'); ?> <script> </script> <h1>Edit Gymnast</h1> <form method="post"> <label for="gymnast">Gymnast:</label> <select id="gymnast" name="gymnast" onChange="getGymnasts(this.value)" required/> <option value="0">None yet</option> <?php $gymnasts = mysqli_query($GLOBALS['link'], "SELECT * FROM gymnasts;"); foreach($gymnasts as $gymnast){ echo("<option value=".$gymnast['id'].">".$gymnast['name']."</option>"); } ?> </select><br> <label for="dob">Date of Birth:</label> <input type="date" id="dob" name="dob" required/> <label for="gender">Gender:</label> <select id="gender" name="gender" required /> <option value="F">Female</option> <option value="M">Male</option> </select><br> <label for="parent">Parent's Name:</label> <input type="text" id="parent" name="parent" required /> <br> <label for="email">Contact Email:</label> <input type="text" id="email" name="email" required /> <br> <label for="phone">Contact Phone:</label> <input type="text" id="phone" name="phone" required /> <br> <label for="parent">Contact Addres:</label> <textarea id="address" name="address" required /></textarea><br> <select id="status" name="status" required /> <option value="0"></option> <input type="submit" id="saveChanges" name="saveChanges" /> </form> 

Answer 1

To set the value of an element with jQuery you need to use .val() http://api.jquery.com/val/

So all of those lines need to change from value to val, eg

$("#dob").val(data['dob']);

Answer 2

Your AJAX function needs to be like

function getGymnasts(val){
    $.ajax({
        type:"POST",
        url:"ajax_populate_gymnasts.php",
        data: 'gymnast='+val,
        success: function(response){
            var result = JSON.parse(response);
            if (result.response == true) {
                var data = result.rows;
                $("#dob").val(data[0].dob);
                $("#gender").val(data[0].gender);
                $("#parent").val(data[0].parent);
                $("#email").val(data[0].email);
                $("#phone").val(data[0].phone);
                $("#address").val(data[0].address);
                $("#status").val(data[0].status);
            }else if (result.response == false) {
                $('#gymnast').append('<option>No Gymnasts were found!</option>');
            }
        }
    });
}

and your ajax_populate_gymnasts.php

<?php
require('../includes/dbconnect.php');

$sql = "SELECT * FROM gymnasts WHERE id='$gymnastid'";
$result = mysqli_query($gym, $sql);

if (mysqli_num_rows($result) > 0) {
    $data = mysqli_fetch_all($result, MYSQLI_ASSOC);
    echo json_encode(['rows' => $data, 'response' => true]);
} else {
    echo json_encode(['response' => false]);
}
mysqli_close($GLOBALS['link']);
exit();
?>
}