Dynamic Drop down boxes

Shell Programming and Scripting
1

Hello All,

I am trying to come up with this interface with the backend on perl. The interface needs drop down boxes with dynamic chain loading ( as in contents of the 1st drop down box will populate the second drop down and so on) Any idea how I can do this?

Kindly help

Regards,
Garric

2

Use HTML with a single form element embracing all your drop downs ("select"s). You may need some Javascript to initiate script-triggered form submit when user changes the dropdown selection. As the form submission takes place, it will be received by Web server and the form processor is presumably a CGI script which receives the form parameters, re-generate the HTML to highlight the selected option and present an updated view based on what is selected. This CGI script can be written in Perl and executed from a CGI-enabled Web server.

If you understand HTML form processing and CGI, this should be a pretty straightforward task. Otherwise, please do some reading on this (i.e. HTML forms and Perl CGI scripting), as we cannot cover so much knowledge with such a tiny space here.

3

I understand the HTML and CGI part of it. But how do I integrate the Javascript into this? It will help me if you can lead me to some documentation on the same. Thanks

4

Javascript is just embedded in HTML (or in a separate .js file linked from the HTML, as I normally prefer), so your CGI just output the "script" element like normal plain text with Perl/CGI.

Javascript is the language you write your client-side scripts, but to access the objects on the HTML document (such as form controls) you will need to do so through the Javascript binding of DOM. You will need to set Javascript event handlers to capture selection change event of dropboxes.

Official advise starts here:

Javascript: JavaScript - MDC
DOM: DOM - MDC

5

Thats great !! Thanks for the help. I will read more about that and see if I can solve it.

6

Could you give me a small example showing the same?

Regards,
garric

7

This is the simplest example. Save it as "testdropbox.pl":

#!/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',
		},
	},
);

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 ($cty) = @_;
	return if (!$cty);
	print qq|
	<select id="city" name="city">
	<option id="--" selected="selected">Please choose city</option>|;
	foreach (keys %{$locations{$cty}->{'cities'}}) {
		print qq|<option value="$_">| . $locations{$cty}->{'cities'}{$_} .  qq|</option>\n|;
	}
	print "</select>\n";
}

print qq|
<html>
	<head>
		<title>Dropbox Demo</title>
	</head>
	<body>
		<form action="testdropbox.pl" method="post" id="tst">
		<table><tr><td>
|;
print_cty_dropbox($cgi->param('cty'));
print qq|
		</td><td>
|;
print_city_dropbox($cgi->param('cty'));
print qq|
		</td></tr></table>
		</form>
		<script type="text/javascript"><!--
			document.getElementById('cty').onchange = function() {
				document.getElementById('tst').submit();
			};
		// --></script>
	</body>
</html>
|;
8

Hi,

Thanks for that. But only the first part seems to work. When I choose something in the first box, it runs into an error.

9

What is the error? I just copied and pasted from my machine and there was no error when I tested.

I have uploaded to Dropbox Demo.

10

The following error props up when I choose something in the first list

"The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error. "

11

You did not save the script as "testdropbox.pl", which I mentioned.

Please check the link I posted. The code running there is exactly the same as posted. There should not be any problem there.

12

Ohhh Ok. It worked now. Thanks a tonne.

13

Hi. Sorry to be bugging you so much. But I am not able to understand this piece of code you showed me as an example. What must I go through to understand this? Please lead me to some pointers.

14

Assuming you really know HTML (can hand-code it) and you know what CGI is (please read the CGI specification otherwise although rather dated) as you previously mentioned, then you should learn Javascript and DOM, and probably Perl too if you are not too familiar with it.

It's difficult to give you any specific pointers as I do not know how much you know about all of these things. However, as you do not understand how the script works, then I really doubt whether you have production knowledge in HTML and CGI, as this is a really simple example.

You can do a directory or Google search on these keywords and you ought to find a lot of resources. You may probably wish to buy some books on these subjects but I have no recommendations at this point.

I would suggest you to ensure you have working knowledge of the client tier first, i.e. HTML and Javascript/DOM. Then you can proceed further to understand how to generate them on the server side, and investigate how CGI allows you to capture form parameters on the server-side, and send back the response.