使用AJAX根据选择填充表单域

Question

So I'm having trouble figuring out how to get this done. I'll explain briefly what happens and what needs to happen. First of all a dokter can add patiënts into a database ( currently only firstname, lastname, age, ... ). this is already working but now I want the dokter to be able to search the database based on the "profile" fields of a certain patiënt in order to look for similar patients. So what I have is a dropdown that shows the patients this dokter has added ( mypatients) and whenever he selects one of those patients from the dropdown menu the fields get updated based on that selection. This is the code I have right now:

-- This is the php I run to add users in the dropdown field (the MyPatients- functions selects all the patients where the username is the same as the dokters username that is currently logged in ):

<?php

session_start();
include_once("classes/Db.class.php");
include_once("classes/Patient.class.php");


if(!isset($_SESSION['username']))
{
   header("Location: login.php");
}

$patient = new Patient();
$patient->Dokter = $_SESSION['username'];

$results = $patient->MyPatients();

?>

-- This is the search form ( includesearch.php )

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="form-horizontal" role="form">

<div class="form-group">
  <label class="col-lg-2 control-label">Mijn Patiënt</label>
  <div class="col-lg-2">
    <select name="selectedpatient" class="form-control">
      <option value"" disable selected>&nbsp;</option>
      \<?php 
      while($r = $results->fetch_assoc()){
        echo "<option>". $r["firstname"] . " " . $r["lastname"] . "</option>";
      }
      ?>
    </select>
  </div>
</div>


<!-- SCRIPT FOR DATEPICKER -->

<div class="form-group">
  <label class="col-lg-2 control-label">Leeftijd</label>
  <div class="col-lg-5">
    <input id="age" name="age" type="text" class="form-control" placeholder="age">
</div>

</div>

 <div class="form-group">
  <label class="col-lg-2 control-label">Language</label>
  <div class="col-lg-5">
    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="nl"> NL
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="fr"> FR
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="en"> EN
    </label>
  </div>
</div>

 <div class="form-group">
  <label class="col-lg-2 control-label">Profession</label>
  <div class="col-lg-2">
    <select name="profession" class="form-control">
      <option value"" disable selected>&nbsp;</option>
      <option value="jobless">Without a job</option>
      <option value="selfemployed">Selfemployed</option>
      <option value="student">Student</option>
    </select>
  </div>
</div>

</form>

I have tried using ajax with the document.getElementById, but so far without succes.

Answer 1

1. you would need a php which returns patient details when patient id is posted
2. than add onchange for your selectedpatient selectbox which uses ajax to post the patient id to this php you just created.
3. the patient id could be added as value of the options in your selectbox.
4. and lastly you'd need to add a success callback function for your ajax, which uses javascript to populate profile info to your html form