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> 

Open in new window

Harkin32Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
You may want to use jQuery for the project.  This article shows the basics of using jQuery/AJAX to communicate between the browser and the server that runs PHP.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
OK, now that I've looked at your code, here is what I might suggest.  Create the backend script in parts - a separate PHP script for each inquiry.  Each part of the client-facing web page can then be tested separately from the web browser (that's what GET method requests are good for).  This will let you completely debug each of the server-side scripts.  Next, create a simple front-end script that allows the browser to receive client input via traditional HTML forms, and call the backend scripts.  Once you have those two parts working, move on to the AJAX interaction.  It's relatively easy to get this project done if you break it apart into steps that are small enough to test and debug in isolation.  The AJAX part of things is a bit more complicated because it can be difficult to find the problems (is it client or server) when the boundaries are blurred by XHR.

For the AJAX part, a good design might be for your script to call the PHP scripts and have them return the entire "select" HTML tag set.  The tag set can be injected into the HTML forms in the ways shown in the article.  In a more sophisticated RESTful API, you might want to use JSON strings, but for this application JSON would introduce additional knowledge requirements and technologies that would not really add value to the process or the product.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.