Help Using jQuery to Display Data From Database Based On DropdownList Selection

JavaScript
,
1

Hi,

New to web programming here. I am using PHP and trying to incorporate jQuery. I have a form to remove wines from a database. The form has one dropdownlist used to select the wine to remove. Underneath the dropdownlist I would like a table row to display showing the details of the chosen wine based on the dropdown selection to retrieve the details of that wine from the database such as (color, country, size, etc). How does one achieve this using jQuery? Any help would be great. Thank you.

I have tried the following code.

This is the php file with the Form (removeWine.php)

<head>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="../View/removeWine.js"></script>


	<link rel="stylesheet" type="text/css" href="style.css">
</head>

        <form action= "" method="POST">

          <tr>
            <td>Select Wine to Remove:     </td>

            <td>

              <select id='wineNameSelect' name='wineName'>

                <?php
								$description= "";
								$wineListing = getWinesByDescription($description);

							foreach ($wineListing as $wineID=>$description) :

							 		echo "<option value='" . $description->wineID ."'>" . $description->description ."</option>";
							 endforeach
							 ?>

            	</select>
          	</td>

						<tr>
							<td>
							Wine Details
							</td>
							<td>
									<ul id="results">
									</ul>
							</td>
						</tr>


        </tr>
      </table><p><br>
        <center><input type="submit" name= "removeWineButton" value="Remove Wine"></center><p><p><p><p>
      </form>

Javascript File (removeWine.js)

$(document).ready(function(){
$("#wineNameSelect").prepend("<option value='' selected='selected'> </option>");
});
$("#wineNameSelect").change(function(){
  var description = $(this).find(':selected').data('description');
  //console.log(description);
  var content = "";
  $.each(description, function(key,value){
    content += "<li>"+value.wineID+"</li>"
          +"<li>"+value.description+"</li>"
  });
    $("#results").html(content);
});

These are the functions for Access to the Database in DataAcess.php file

  function getWinesByDescription($description)
  {
    if ($description == "") {
      return get_all_wines();
    }
    global $pdo;
    $statement = $pdo->prepare('SELECT *
                                FROM Wine
                                WHERE description=?');
    $statement->execute([$description->description]);
    $wineDesc = $statement->fetchAll(PDO::FETCH_CLASS, 'Wine');
    return $wineDesc;
  }



  function getWinesByDescriptionJson($description)
{
  $wineByDesc = getWinesByDescription($description);
  return json_encode($wineByDesc);
}

This is the Wine Class (wine.class.php)

<?php

class Wine implements JsonSerializable  {


var $wineID;
var $wineSizeID;
var $wineCountryID;
var $wineRatingID;
var $wineColourID;
var $wineCode;
var $price;
var $description;
var $wineRating;
var $wineIMG;
var $packageID;
var $wineCategoryID;
var $quantity=1;

function __get($name){
	return $this->$name;
}
function __set($name,$value){
	$this->$name=$value;
}
public function JsonSerialize(){
	return get_object_vars($this);
}


}
?>
2

This can you do using ajax or post call to retrieve form a database all the details that you want (for this if you have problem we’ ll discuss in a new post).Below is the function post with its arguments

$.post(url, data, success, dataType);
3

Thanks. So how should I set this up?

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.