I have 3 drop down boxes which are dependent on the selection of each other. The first drop down is working but the 2nd and 3rd would not populate anything. This is the form:
<fieldset>
<legend style="color: blue">Tour Details</legend>
<li id="li_11" >
<div><label for="element_11">Tour Type </label>
<select id="element_11" name="element_11">
<option value="">--Select--</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<label style="color: red; font-style: italic;"></label>
</div>
</li>
<li id="li_12" >
<div><label for="element_12">Country</label>
<select id="element_12" name="element_12" class="update" disabled="disabled">
<option value="">----</option>
</select>
</div>
</li>
<li id="li_13" >
<div><label for="element_13">Destination</label>
<select id="element_13" name="element_13" class="update" disabled="disabled">
<option value="">----</option>
</select>
</div>
</li>
This is the PDO code at the top of the form
<?php
try {
$objDb = new PDO('mysql:host=localhost;dbname=jurassicbase5', 'root', '');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT * FROM `destination` WHERE `master` = 0";
$statement = $objDb->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
echo 'There was a problem';
}
?>
This is the update.php file which handles the onchange event
<?php
if (!empty($_GET['id']) && !empty($_GET['value'])) {
$id = $_GET['id'];
$value = $_GET['value'];
try {
$objDb = new PDO('mysql:host=localhost;dbname=jurassicbase5', 'root', '');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT * FROM `destination` WHERE `master` = ?";
$statement = $objDb->prepare($sql);
$statement->execute(array($value));
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
if (!empty($list)) {
$out = array('<option value="">Select one</option>');
foreach($list as $row) {
$out[] = '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
echo json_encode(array('error' => false, 'list' => implode('', $out)));
} else {
echo json_encode(array('error' => true));
}
} catch(PDOException $e) {
echo json_encode(array('error' => true));
}
} else {
echo json_encode(array('error' => true));
}
Can anyone see where the problem is? Please help me as i have been at this for hours. If you need to see the database table for this form, i can show it to you.
This is the javascript code that handles the onchange event
var formObject = {
run : function(obj) {
if (obj.val() === '') {
obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
} else {
var id = obj.attr('id');
var v = obj.val();
jQuery.getJSON('mod/update.php', { id : id, value : v }, function(data) {
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled');
} else {
obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
}
});
}
}
};
$(function() {
$('.update').live('change', function() {
formObject.run($(this));
});
});