linking php to jquery - php

Question

I am trying to build my first jquery web application, but I've hit a roadblock and can't seem to figure this out.
I have a PHP page and an HTML page.
The HTML page has a form with a triple drop down list.
The PHP page connects to the database but I am not sure how to pass the query result from the php page to populate the drop down list on the html/javascript page.
Here is my code thus far.
HTML:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#selector").submit(function() {
$.ajax({
type: "GET",
url: "DBConnect.php",
success: function(msg){
alert(msg);
}
});
var select_car_make = $('#select_car_make').attr('value');
var select_car_model = $('#select_car_model').attr('value');
var select_car_year = $('#select_car_year').attr('value');
alert("submitted");
}); //end submit
});
</script>
<h1 style="alignment-adjust:center">Car information:</h1>
<hr />
<div id="results">
<form action="get.php" id="selector" method="get" name="sizer">
<table width="451" height="70" border="0">
<th width="145" height="66" scope="row"><label for="select_car_make"></label>
<div align="center">
<select name="select_car_make" id="select_car_make" onchange="">
</select>
</div></th>
<td width="144"><label for="select_car_model"></label>
<div align="center">
<select name="select_car_model" id="select_car_model">
</select>
</div></td>
<td width="140"><label for="select_car_year"></label>
<div align="center">
<select name="select_car_year" id="select_car_year">
</select>
</div></td>
</tr>
</table>
<input name="completed" type="submit" value="submit" />
</form>
Here is the PHP Page:
<?php
$DBConnect = mysqli_connect("localhost", "root", "password", "testing")
or die("<p>Unable to select the database.</p>" . "<p> Error code " . mysqli_errno($DBConnect) . ": " . mysqli_error($DBConnect)) . "<p>";
echo "<p>Successfully opened the database.</p>";
$SQLString1 = " SELECT car_make FROM cars";
$QueryResult = mysqli_query($DBConnect, $SQLString1)

Answer 1

Hey Justin if this is your first time dipping your toes, I would keep it ultra-simple. Put the select box inside something with an ID, such as a span or div. Then get your AJAX response to just rewrite the contents, this is an easy and clear way to start with AJAX, for example:
$.ajax({
type: "POST",
url: "/call.php",
data: "var=" + myData,
success: function(response){
$("#someId").html(response);
}
});
On your remote page just echo the whole select box:
echo "<select name='cars'>";
echo "<option value='".$value."'>".$name."</option>";
etc...
Again this isn't the best way, but its certainly not the worst.

Answer 2

You should be able to JSON encode your result from PHP into a variable which Javascript or the Jquery can read. I did it like this with an image string I received from PHP reading a directory of images:
var imageFiles = '<?=$images_js?>';
imageFiles = $.parseJSON(imageFiles);
var images = [];
for(i = 0; i<imageFiles.length; i++){
var image = document.createElement('img');
image.src = imageFiles[i];
images.push(image);
}
var count = imageFiles.length;
var i = 0;
the is the variable which came from my php result. The $.parseJSON(imageFiles); does the interpretation for the variable.
I hope this helps, or puts you along the right path.

Answer 3

If you want the car make selection page to be populated by your database, you should give it a .php extension as well. I think you should reconsider if AJAX is the best option.
But I would put the database connection code inside a "conn.php" file to be included on your selection page then populate it with PHP.