Getting data from a php file using Javascript and Ajax

Question

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 


    <?php

    $link = mysqli_connect("localhost","student","student");
    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['Location']; ?></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> 

Answer 1

Use jquery validation to validate this form... its simple to do but hard to explain for me.

for without post page save this data... 1. make a php function to save the data.. 2. call this function using ajax/jquery..

Sample Code is here...

$.ajax({
  type: 'GET',
  url: "Your Function Path/Url",
  crossDomain: 'true',
  success:
  function (data){
  // here alert your function response..
  alert(data);
  }
});