Show options of selection from database based on parent selection

Question

I have a form with 2 selection boxes, both of these boxes draw their options from my database through php.

The first one shows a list of books ordered by their ISBN like this:

<ISBN> - <Book name>

Now the second selection box will list all the editions that exist for the book selected in the previous selection (based on ISBN) and show each one of them with just the number of the edition.

What I do in this form is insert a specific copy of the selected book with the specific edition with its serial number in the database.

What I try to do is with the onChange to retrieve the ISBN selected from the first select and use it to show the options of the second selection.

I use the function dropdown() to display the book select and the dropdownEdition() for the edition select:

function dropdown($intIdField, $strNameField, $strTableName, $strOrderField, 
         $strNameOrdinal, $strMethod="asc") {
   echo "<select name=\"$strNameOrdinal\">\n";
   echo "<option value=\"NULL\">Select Value</option>\n";
   
   $strQuery = "select $intIdField, $strNameField
               from $strTableName
               order by $strOrderField $strMethod";

   $rsrcResult = mysql_query($strQuery);

   while($arrayRow = mysql_fetch_assoc($rsrcResult)) {
       $strA = $arrayRow["$intIdField"];
       $strB = $arrayRow["$intIdField"] . " - " . $arrayRow["$strNameField"];
       echo "<option value=\"$strA\">$strB</option>\n";
   }
   echo "</select>";
}

function dropdownEdition($intId1Field, $intId2Field, $strTableName, $strOrderField, 
         $strNameOrdinal, $strMethod="asc") {      
    
   echo "<select name=\"$strNameOrdinal\">\n";
   echo "<option value=\"NULL\">Select Value</option>\n";
   
   $strQuery = "SELECT $intId1Field, $intId2Field
               FROM $strTableName
               ORDER BY $strOrderField $strMethod";

   $rsrcResult = mysql_query($strQuery);

   while($arrayRow = mysql_fetch_assoc($rsrcResult)) {
       $strA = $arrayRow["$intId1Field"];
       echo "<option value=\"$strA\">$strA</option>\n";
   }

   echo "</select>";
}

What I basically want to do is pass the ISBN selected previously with the onChange, in the variable $intId2Field of the dropdownEdition().

The problem with that is I have searched for tutorials but I can't understand anything because I have never worked with jQuery or Javascript or AJAX and I am a very novice web programmer. That is the reason for I am asking for some help here.

Here are how the 2 functions are called:

 <?php dropdown("book_ISBN", "book_title", "book", "book_ISBN", "book"); ?>

 <?php dropdownEdition("edition_no", "???????", "edition", "edition_no", "edition"); ?>`

The ???? are the book_ISBN because I don't know how to pass it in.

Here are how the tables are connected:

References -

Answer 1

It sounds like you've already figured this out, but you will need to make an asynchronous request to the server, passing the ISBN to a PHP script which will execute your mySQL query.

Your PHP script would return the mysql results, possibly as a JSON object which could then be parsed using JS and formatted as HTML.

Here is some code I chucked together to demonstrate.

HTML:

<select name="isbn-select" id="isbn-select">
  <option value="">Select an ISBN</option>
  <option value="isbn1">isbn1</option>
  <option value="isbn2">isbn2</option>
  <option value="isbn3">isbn3</option>
</select>

JS:

$('#isbn-select').on('change', function() {
  isbn = $('#isbn-select').val();
  $.getJSON('get_editions.php',
  {
  isbn: isbn
  },
  function(data) {
    var editions = [];
    $.each(data, function(index, val) {
      editions.push('<option value="' + val + '">' + val + '</option>');
    });
    $('<select/>', {
      'id': 'editions-select',
      'name': 'editions-select',
      html: editions.join('')
    }).appendTo('body');
  });
});

PHP:

<?php
// Code to select editions from your database goes here....
// Your isbn can be accessed as $_GET['isbn']
$editions_arr = array('editon1', 'edition2', 'edition3');
echo json_encode($editions_arr);
?>

I have used jQuery's getJSON method to fetch a JSON object from get_editions.php. The results are then formatted as a select and appended to the HTML document. To keep things simple I am not doing any error checking or validation.

I hope this helps get you on the right track!

EDIT:

If you wish to return formatted HTML instead of a JSON object, here's how you can do that.

JS:

$('#isbn-select').on('change', function() {
  isbn = $('#isbn-select').val();
  $.get('get_editions.php',
  {
  isbn: isbn
  },
  function(data) {
    $('body').append(data);
  });
});

PHP:

<?php
// Code to select editions from your database goes here....
// Your isbn can be accessed as $_GET['isbn']
$editions_html = '<select id="editions-select" name="editions-select">';
$editions_html .= '<option value="edition1">edition1</option>';
$editions_html .= '<option value="edition2">edition2</option>';
$editions_html .= '<option value="edition3">edition3</option>';
$editions_html .= '</select>';
echo $editions_html;
?>

You can read up on jQuery's AJAX functions here: http://api.jquery.com/category/ajax/