Hello All,
I'm writhing a perl-cgi-script with 3 dropdownboxes which are dependent on each other. When a value is selected in the first box a java-script is called which will manage the value's in the second dropbox. But when I select a value from the second dropbox the value on screen stays the default value. It gives the right value to the 3e dropbox, but it doesn't look nice. Here is my script (if you save it as testdropbox.pl it should work on your system too):
Code:
#!/usr/bin/perl -w
use CGI;
my $cgi = CGI->new();
print $cgi->header('text/html');
my %locations = (
'ca' => {
'desc' => 'Canada',
'cities' => {
'ca_to' => 'Toronto',
'ca_vc' => 'Vancouver',
},
},
'us' => {
'desc' => 'United States',
'cities' => {
'us_ny' => 'New York',
'us_sf' => 'San Francisco',
},
},
);
my %streets = (
'ca_to' => {
'desc' => 'Toronto',
'street' => {
'ca_aa' => 'a',
'ca_bb' => 'b',
},
},
'ca_vc' => {
'desc' => 'Vancouver',
'street' => {
'ca_cc' => 'c',
'ca_dd' => 'd',
},
},
);
sub print_cty_dropbox {
my ($cty) = @_;
print qq|
<select id="cty" name="cty">
<option id="--" | . (!$cty?'selected="selected"':'') . qq|>Please choose country</option>|;
foreach (keys %locations) {
print qq|<option value="$_" | . (($cty && ($cty eq $_))?'selected="selected"':'') . qq|>${$locations{$_}}{desc}</option>\n|;
}
print "</select>\n";
}
sub print_city_dropbox {
my ($city) = @_;
return if (!$city);
print qq|
<select id="city" name="city">
<option id="--" | . (!$city?'selected="selected"':'') . qq|>Please choose city</option>|;
foreach (keys %{$locations{$city}->{'cities'}}) {
print qq|<option value="$_" | . (($city && ($city eq $_))?'selected="selected"':'') . qq|>$locations{$city}->{'cities'}{$_}</option>\n|;
}
print "</select>\n";
}
sub print_street_dropbox {
my ($street) = @_;
return if (!$street);
print qq|
<select id="street" name="street">
<option id="--" selected="selected">Please choose street</option>|;
foreach (keys %{$streets{$street}->{'street'}}) {
print qq|<option value="$_">| . $streets{$street}->{'street'}{$_} . qq|</option>\n|;
}
print "</select>\n";
}
print qq|
<html>
<head>
<title>Dropbox Demo</title>
</head>
<body>
<form action="testdropbox.pl" method="get" id="tst">
<table><tr><td>
|;
print_cty_dropbox($cgi->param('cty'));
print qq|
</td><td>
|;
print_city_dropbox($cgi->param('cty'));
print qq|
</td><td>
|;
print_street_dropbox($cgi->param('city'));
print qq|
</td></tr></table>
</form>
<script type="text/javascript"><!--
document.getElementById('cty').onchange = function() {
document.getElementById('tst').submit();
};
// --></script>
<script type="text/javascript"><!--
document.getElementById('city').onchange = function() {
document.getElementById('tst').submit();
};
// --></script>
</body>
</html>
|;
Anybody any suggestions?
Thanx Kluther
