Getting data from a php file using Javascript and Ajax

Hi I am trying to create a Survey for a personal project that I am working on to teach my self web development. The survey is for an F1 website and I want to be able to ask the users five questions and based on there answers I want to be able to tell them what Grand Prix is best suited to them.

My questions for the users are:
1)      what grand Prix’s are closest to you?  (I have given them the option to select 3  Grand Prix’s by suing select boxes)
2)      What countries would you like to visit? (I have given them the option to select 2  Countries by suing select boxes)
3)      When are you available to go to a Grand Prix (I have given them the option to select 3 months by suing select boxes)
4)      What is your favorite team? (one option using a select box)
5)      Who is your favorite driver? (One  option using select box)

So far I have created a database with tables for countries, Grand Prix’s, months, teams and drives.

I have a Survey.php file that populates the select boxes from the database.

So my question is how do I create a JavaScript file link it to the php file so it populates the select boxes to get the input from the user and display the result with out refreshing the page using Ajax?

My Survey.php code

<?php

$link = mysqli_connect("localhost","root","root");
mysqli_select_db($link,"gpdb");


//question 1
$query = "SELECT * from gp";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?>

<div class="Circuits">
<h1>Which Grand Prix's are closest to you<h1>
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="get" >
<p>Option 1</p>
<select name="GrandPrix">
<?php do { ?>    
                <option value="<?php echo $row['Circuits'];  ?>"><?php echo $row['Circuits'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
     </select>
    
   
<?php
$query = "SELECT * from gp";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?>

   
<p>Option 2</p>
<select name="GrandPrix2">
<?php do { ?>    
                <option value="<?php echo $row['Circuits'];  ?>"><?php echo $row['Circuits'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select>

<?php
$query = "SELECT * from gp";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?> 
   
<p>Option 3</p>
<select name="GrandPrix3">
<?php do { ?>    
                <option value="<?php echo $row['Circuits'];  ?>"><?php echo $row['Circuits'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select><br />
</form>
</div>




<?php
$query = "SELECT * from place";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result); 
?>

<div class="Country"
<h1>What countries would you like to visit?</h1>
<p>Country 1</p>
    <select name="Country1">
    <?php do { ?>
        <option value="<?php echo $row['Location']; ?>"><?php echo $row['Location']; ?></option>
            <?php } while ($row = mysqli_fetch_assoc($result)); ?>
      </select>
    
<?php
$query = "SELECT * from place";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result); 
?>
<p>Country 2</p>
    <select name="Country1">
    <?php do { ?>
        <option value="<?php echo $row['Location']; ?>"><?php echo $row['Location']; ?></option>
            <?php } while ($row = mysqli_fetch_assoc($result)); ?>
      </select>
</div>



<?php
$query = "SELECT * from month";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?>

<div class="month">
<h1>When are you available to go to a grand prix</h1>
     <p>Month 1</p>
    <select name="Month">
<?php do { ?>    
                <option value="<?php echo $row['monthofgp'];  ?>"><?php echo $row['monthofgp'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select>

<?php
$query = "SELECT * from month";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?>
<p>Month 2</p>
<select name="Month">
<?php do { ?>    
                <option value="<?php echo $row['monthofgp'];  ?>"><?php echo $row['monthofgp'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select>

<?php
$query = "SELECT * from month";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?>
<p>Month 3</p>
<select name="Month">
<?php do { ?>    
                <option value="<?php echo $row['monthofgp'];  ?>"><?php echo $row['monthofgp'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select><br />
 </div>
 
 
<div class="Driver">   
<?php
$query = "SELECT * from teamName";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?>

<h1>What is favourite team?</h1>
 
     <p>Team</p>
    <select name="taem">
<?php do { ?>    
                <option value="<?php echo $row['Team'];  ?>"><?php echo $row['Team'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select><br />
</div>



<div class="Driver">
<?php
$query = "SELECT * from driverName";
$result = mysqli_query($link,$query);
$row = mysqli_fetch_assoc($result);
?>

<h1>Who is your favourite driver?</h1>
 
     <p>Driver</p>
    <select name="taem">
<?php do { ?>    
                <option value="<?php echo $row['Driver'];  ?>"><?php echo $row['Driver'];  ?></option>
        <?php } while ($row = mysqli_fetch_assoc($result)); ?>
    </select><br />
</div>


<input type="submit" />
<input type="reset" />

</form> 

Select allOpen in new window