Selective dependency

Report · Nov 16, 2012

Summary

I have an input form. One of the field is location of training room. In this version I have provided a selection of location and room on the drop-down list. I want to be able to split this. To make it more intelligent. That is, the user will select the location, then another drop down list will have the rooms for this location. For example;

if user selects London then only the rooms within london will appear in the adjacent drop-dwon menu.

Question: How will I achieve this? From the current version with a single drop-down menu? I want have 2 selection input fields. When user select the field location field , the next, will only do a drop-down selection of rooms in this location.

Source Code

<?php require_once('Connections/dbAttendance.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

{

if (PHP_VERSION < 6) {

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

}

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

}

return $theValue;

}

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form")) {

$insertSQL = sprintf("INSERT INTO attendlist (Windowsid, title, firstname, surname, extension, mobile, jobrole, course, cpg, mgrname, room) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)",

GetSQLValueString($_POST['textfield'], "text"),

GetSQLValueString($_POST['select'], "text"),

GetSQLValueString($_POST['textfield2'], "text"),

GetSQLValueString($_POST['textfield3'], "text"),

GetSQLValueString($_POST['textfield4'], "text"),

GetSQLValueString($_POST['textfield5'], "text"),

GetSQLValueString($_POST['select5'], "text"),

GetSQLValueString($_POST['select2'], "text"),

GetSQLValueString($_POST['select4'], "text"),

GetSQLValueString($_POST['textfield7'], "text"),

GetSQLValueString($_POST['select3'], "text"));

mysql_select_db($database_dbAttendance, $dbAttendance);

$Result1 = mysql_query($insertSQL, $dbAttendance) or die(mysql_error());

$insertGoTo = "Thankyou.php";

if (isset($_SERVER['QUERY_STRING'])) {

$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";

$insertGoTo .= $_SERVER['QUERY_STRING'];

}

header(sprintf("Location: %s", $insertGoTo));

}

mysql_select_db($database_dbAttendance, $dbAttendance);

$query_rsAttendance = "SELECT * FROM attendlist";

$rsAttendance = mysql_query($query_rsAttendance, $dbAttendance) or die(mysql_error());

$row_rsAttendance = mysql_fetch_assoc($rsAttendance);

$totalRows_rsAttendance = mysql_num_rows($rsAttendance);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Delegate Register</title>

</head>

<?php

$date = date(“format”, $timestamp);

?>

<body>

<h3>Register: <?php echo "Date - ".date("d/m/Y - H:ia")?></h3>

<form action="<?php echo $editFormAction; ?>" method="post" name="form">

<tr>

<span class="textfieldRequiredMsg">A value is required.</span></span></td>

</tr>

<tr>

<td><div align="right">Title *</div></td>

<option value="0">Select</option>

</select>

<span class="selectRequiredMsg">Please select an item.</span></span></td>

</tr>

<tr>

<td><div align="right">First name*</div></td>

<span class="textfieldRequiredMsg">A value is required.</span></span></td>

</tr>

<tr>

<td><div align="right">Surname *</div></td>

<span class="textfieldRequiredMsg">A value is required.</span></span></td>

</tr>

<tr>

<td><div align="right">Contact / Bleep *</div></td>

<span class="textfieldRequiredMsg">A value is required.</span></span></td>

</tr>

<tr>

<td><div align="right">Mobile no: (optional)</div></td>

</tr>

<tr>

</tr>

<tr>

<option value="0">Select </option>

<option value="1">Doctor</option>

<option value="2">Nurse IP</option>

<option value="3">Nurse OP</option>

<option value="4">Midwife</option>

<option value="5">Booking Clerk</option>

<option value="6">Medical Secretary</option>

<option value="7">OP Receptionist</option>

<option value="10">Tester</option>

</select>

<span class="selectRequiredMsg">Please select an item.</span></span></td>

</tr>

<tr>

<td><div align="right">Manager's Name *</div></td>

<span class="textfieldRequiredMsg">A value is required.</span></span></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><div align="right">Course *</div></td>

<option value="0">Select</option>

<option value="2">Doctors</option>

<option value="3">Nurse IP</option>

<option value="4">Nurse OP</option>

<option value="5">Midwife</option>

<option value="6">Booking Clerk</option>

<option value="7">Medical Secretary</option>

<option value="8">OP Receptionist</option>

</select>

<span class="selectRequiredMsg">Please select an item.</span></span></td>

</tr>

<tr>

<td><div align="right">Location *</div></td>

<option value="0">Select </option>

<option value="1">CHX 12 Floor Rm 1</option>

<option value="2">CHX 12 Floor Rm 2</option>

<option value="5">HH W12 Conference</option>

</select>

<span class="selectRequiredMsg">Please select an item.</span></span></td>

</tr>

<tr>

<option value="0">Select </option>

<option value="1">CPG 1 - Medicine</option>

<option value="2">CPG 2 - Surgery and Cancer</option>

<option value="3">CPG 3 - Specialist Services </option>

<option value="4">CPG 4 - Circulatory Services and Renal Medicine</option>

<option value="5">CPG 5 - Womens and Children</option>

<option value="6">CPG 6 - Clinical and Investigative Sciences</option>

<option value="7">CPG 7 - Private Patients</option>

<option value="8">Others</option>

</select>

<span class="selectRequiredMsg">Please select an item.</span></span></td>

</tr>

<tr>

</tr>

<tr>

<td><div align="center">*Mandatory fields </div></td>

</tr>

</table>

</form>

</div>

<a href="http://validator.w3.org/check?uri=referer"><img

src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

<p align="center"> Cerner@Imperial ICT Training Team </p>

</p>

</div>

</div>

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur", "change"]});

var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {validateOn:["change", "blur"]});

var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {validateOn:["blur", "change"]});

var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {validateOn:["blur", "change"]});

var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none", {validateOn:["blur", "change"]});

var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2", {validateOn:["change", "blur"]});

var spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {validateOn:["change", "blur"]});

var spryselect4 = new Spry.Widget.ValidationSelect("spryselect4", {validateOn:["change", "blur"]});

var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {validateOn:["blur", "change"]});

var spryselect5 = new Spry.Widget.ValidationSelect("spryselect5", {validateOn:["blur", "change"]});

</script>

</body>

</html>

<?php

mysql_free_result($rsAttendance);

?>

Report · Nov 17, 2012

Search the web for "cascading dropdown" and/or "dependent dropdown" for techniques and examples.

Report · Nov 17, 2012

Hi Bregent,

Thanks for the reply. These are dynamic solutions. I suppose there is no other way of doing this except to consider database - tables. Most of the post relates to ASP. The post about DW extension was interesting 'dependency drop-down menus', but I was looking for a client side solution and not a server side solutions.

I was also hoping to extend this from the form I have created and working. I was hoping to adapt and embed a client side snippet of code.

Report · Nov 19, 2012

>These are dynamic solutions.

Yes, of course. You have a dynamic problem. HTML itself has no feature that supports interactivity.

>I suppose there is no other way of doing

>this except to consider database - tables.

Database tables are usually the best option because they can easily be changed without having to update your web pages. In many cases, the data that drives the dropdown is already contained in the database, so you just need to leverage that.

But if you have data that you know will not be changing, or changes VERY infrequently, then you could use a pure client side JS solution.