Binding php with jquery

Question

I am trying to create my first jquery web application, but I ended up at a checkpoint and did not seem to understand this.

I have a PHP page and an HTML page. The HTML page has a triple drop-down list form. The PHP page is connecting to the database, but I'm not sure how to transfer the result of the request from the php page to populate the drop-down list on the html / javascript page.

Here is my code.

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 leave it ultra-simple. Put a select box inside something with an identifier like span or div. Then get an AJAX response to just rewrite the content, this is a simple and straightforward 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, simply select the entire selection field:

 echo "<select name='cars'>"; echo "<option value='".$value."'>".$name."</option>"; etc... 

Again, this is not the best way, but it is certainly not the worst.

Answer 2

You should be able to JSON encode your result from PHP into a variable that Javascript or Jquery can read. I did it this way: the image string I got from PHP read the image directory:

 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; 

this is a variable derived from my php result. $.parseJSON(imageFiles); interprets a variable.

I hope this helps or puts you on the right track.

Answer 3

If you want the car brand selection page to be populated with your database, you must also provide it with the .php extension. I think you should reconsider if AJAX is the best option.

But I would put the database connection code inside the file "conn.php", which will be included in your selection page, and then fill it with PHP.