Displaying the Detailed Results of Selected Item From A DropdownList Box

[Kunyepa]

Hello,

New to programming and have been trying to use PHP and jQuery or AJAX to accomplish the task listed in the title. I'm using an MVC type of approach and have a page to remove wines in the view directory, the controller for the remove wine page in the controller directory, a wine class and Data Acess page in the model directory. The dropdown list in the form is to allow the user to select a wine and directly underneath the results of the details of that selected wine shall appear (as either a table row, or list item elements). I have the code I have been working on below but would like advice on how to tackle this.

PHP RemoveWine Form

        <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>
      </table><p><br>
        <center><input type="submit" name= "removeWineButton" value="Remove Wine"></center><p><p><p><p>
      </form>

jQuery Script in a JS File

  $(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);
  });

Added to the head of the page including the Form

<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>

[The Diamonds]

Hi,

I can't give you a full answer since you didn't post your full code, but I can give you a few advices that would help you figure out the issue in your code.

In your php code, I suppose that you are using 'getWinesByDescription' to get an array of class 'wine' and will give you full list by default if you don't pass params to it.

I also assume that "wineID" & "description" are both properties in the class "wine".
In that case your 'foreach' loop should be something like :

foreach ($wineListing as $item) :
  echo "<option value='" . $item->wineID ."'>" . $item->description ."</option>";
endforeach;

Now, let's move to the javascript part, you can't select more than 1 item at the same time, so if you want to show the description of the selected item in 'results' span you can use code similar to:

$("#wineNameSelect").change(function(){
  var selected = $(this).find('option:selected');
  console.log(selected.text());
  var content = selected.val() + ": " + selected.text();

  $("#results").html(content);
});

You didn't post your Ajax part or the form submit part, if you need more help please don't hesitate.