asked on

Dynamic Drop Down Menu in Dreamweaver

I have a basic PHP MySQL site set up in Dreamweaver which contains a form to email back information.

I would like the drop down boxes on this form to be dynamic and populate automatically according to what options are selected higher up in the form (without reloading if possible).

I have seen many discussions about this and understand that the preferred way to do this is using javascript but do not know where to start to make it work in this case.

Test code attached below:

<form action="contact.php" method="post">
          <table width="100%" border="0">
            <tr>
              <th colspan="2" align="left" scope="col">&nbsp;</th>
            </tr>
            <tr>
              <td width="33%" align="left" nowrap="nowrap" scope="col"><p>1. Appointment on:</p></td>
              <td width="67%" align="left" nowrap="nowrap" scope="col"><p>
                <?php
//get class into the page
require_once('classes/tc_calendar.php');

//instantiate class and set properties
$myCalendar = new tc_calendar("date5", true, false);
$myCalendar->setIcon("images/iconCalendar.gif");
$myCalendar->setDate(date('d'), date('m'), date('Y'));

//output the calendar
$myCalendar->writeScript();	  
?>
              </p></td>
            </tr>
            <tr>
              <td colspan="2" align="left" scope="col">&nbsp;</td>
            </tr>
            <tr>
    <td colspan="2" align="left" scope="col"><p>2. Surgery:
        <?php do { ?>
          <select name="surgery" id="surgery">
            <?php
do {  
?>
            <option value="<?php echo $row_Recordset6['branch_name']?>"><?php echo $row_Recordset6['branch_name']?></option>
            <?php
} while ($row_Recordset6 = mysql_fetch_assoc($Recordset6));
  $rows = mysql_num_rows($Recordset6);
  if($rows > 0) {
      mysql_data_seek($Recordset6, 0);
	  $row_Recordset6 = mysql_fetch_assoc($Recordset6);
  }
?>
          </select>
          <?php } while ($row_Recordset6 = mysql_fetch_assoc($Recordset6)); ?>
    </p></td>
  </tr>
            <tr>
              <th colspan="2" align="left" scope="col">&nbsp;</th>
            </tr>
            <tr>
    <td colspan="2" align="left" scope="col"><p>3. Select vet:
        <?php do { ?>
          <select name="vet" id="vet">
            <option value="Any">Any</option>
            <?php
do {  
?>
            <option value="<?php echo $row_Recordset7['vet_name']?>"><?php echo $row_Recordset7['vet_name']?></option>
            <?php
} while ($row_Recordset7 = mysql_fetch_assoc($Recordset7));
  $rows = mysql_num_rows($Recordset7);
  if($rows > 0) {
      mysql_data_seek($Recordset7, 0);
	  $row_Recordset7 = mysql_fetch_assoc($Recordset7);
  }
?>
          </select>
          <?php } while ($row_Recordset7 = mysql_fetch_assoc($Recordset7)); ?>
    </p></td>
  </tr>
            <tr>
              <th colspan="2" align="left" scope="col">&nbsp;</th>
            </tr>
            <tr>
    <td colspan="2" align="left" scope="col"><p>4. Preferred appointment time:</p></td>
  </tr>
  <tr>
    <td colspan="2" align="left" scope="col"><p>Between</p>
      <p>
  <select name="time1" id="time1">
    <option value="">Please select time</option>
    <option>08:00</option>
    <option>09:00</option>
    <option>10:00</option>
    <option>11:00</option>
    <option>12:00</option>
    <option>13:00</option>
    <option>14:00</option>
    <option>15:00</option>
    <option>16:00</option>
    <option>17:00</option>
    <option>18:00</option>
  </select> 
      </p>
      <p>and</p>
      <p>
  <select name="time2" id="time2">
    <option value="">Please select time</option>
    <option>08:00</option>
    <option>09:00</option>
    <option>10:00</option>
    <option>11:00</option>
    <option>12:00</option>
    <option>13:00</option>
    <option>14:00</option>
    <option>15:00</option>
    <option>16:00</option>
    <option>17:00</option>
    <option>18:00</option>
  </select>
      </p></td>
  </tr>
  <tr>
    <th colspan="2" align="left" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td colspan="2" align="left" scope="col"><p>5. Select a Reason: 
      
        <select name="reason" id="reason">
          <option value="">Please select a reason</option>
          <option>First Vaccination</option>
          <option>Booster Vaccination</option>
          <option>General Checkup</option>
          <option>Ear Problems</option>
          <option>Eye Problems</option>
          <option>Lame</option>
          <option>Fleas</option>
          <option>Vomiting</option>
          <option>Other</option>
        </select>
    </p></td>
  </tr>
  <tr>
    <th colspan="2" align="left" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td colspan="2" align="left" scope="col"><p>6. Optional: Send a message to your Vet</p></td>
  </tr>
  <tr>
    <th colspan="2" align="left" scope="col"><textarea name="message" id="message" cols="75" rows="3" style="width:300px; height:85px;"></textarea></th>
  </tr>
  <tr>
    <th colspan="2" align="left" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td colspan="2" align="left" scope="col"><p>7. Send your appointment request</p></td>
  </tr>
  <tr>
    <th colspan="2" align="left" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th colspan="2" align="left" scope="col"><input name="send" type="submit" id="send" value="Send" /></th>
  </tr>
</table>
<p></p>
          </form>

Open in new window

cjholder

You could use while(). goto PHP.net and search it. :)

alexking

ASKER

Not sure if while() would fully meet my needs.

When a surgery is selected, I would like the vets and appointment times drop downs to be dynamically populated from different tables in the MySQL database with relevant data only related to that surgery (also based on the date selected).

Jason C. Levine

Hi Alex,

What you are looking for is searchable using the terms "cascading dropdown php mysql" and it does require javascript.

The reason for this is that a form submission is needed so the key from the first dropdown selection can be passed to other queries so they can filter and display the appropriate results. In the pre-AJAX world, this was a simple javascript form submit onchange in the menu and the whole page would reload. With AJAX, that process looks a bit more seamless and fluid but the concept is still the same.

There are two ways to go about this. One, you can find a free script that does this via Google. Two, you can buy an extension for Dreamweaver that automates it. Let me know.

alexking

ASKER

Hi Jason,

I will look at the scripting route but am also interested in the Dreamweaver automation as I do not now javascript at the moment. Do many extensions provide this functionality or can you recommend a specific one?

Thanks.

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alexking

ASKER

Thanks again.