• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 30
  • Last Modified:

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

0
Harkin32
Asked:
Harkin32
  • 2
2 Solutions
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now