I'm having a tough time trying to figure out why the following code isn't working:
test.cgi:
#!/usr/bin/perl -w
use CGI;
$cgi = new CGI;
$cgi->autoEscape(undef);
%ptype = ("0","","1","Pennsylvania","2","New York","3","Ohio");
print $cgi->header('text/html'),
$cgi->start_html(-title=>'Test',-script=>[{-type=>'javascript',-src =>'/scripts/test.js'}]),
$cgi->start_form(-method=>'GET',id=>'frmMain',-name=>'frmMain',-enctype=>'multipart/form-data'),
$cgi->popup_menu(-style=>'width:200',name=>'ProblemType',-values=>\%ptype,-onChange=>'PopulateSType()',-default=>'0'),
$cgi->popup_menu(-style=>'width:200',name=>'SubProblemType',-values=>''),
$cgi->end_form,
$cgi->end_html();
test.js:
function PopulateSType() {
var ProblemList = document.frmMain.ProblemType;
ClearOptions(document.frmMain.SubProblemType);
if (ProblemList[ProblemType.selectedIndex].value == "1") {
AddToOptionList(document.frmMain.SubProblemType, "0", "");
AddToOptionList(document.frmMain.SubProblemType, "1", "Pittsburgh");
AddToOptionList(document.frmMain.SubProblemType, "2", "Philadelphia");
AddToOptionList(document.frmMain.SubProblemType, "3", "Harrisburg");
}
if (ProblemList[ProblemType.selectedIndex].value == "2") {
AddToOptionList(document.frmMain.SubProblemType, "0", "");
AddToOptionList(document.frmMain.SubProblemType, "1", "New York");
AddToOptionList(document.frmMain.SubProblemType, "2", "Buffalo");
AddToOptionList(document.frmMain.SubProblemType, "3", "Middletown");
}
if (ProblemList[ProblemType.selectedIndex].value == "3") {
AddToOptionList(document.frmMain.SubProblemType, "1", "Cleveland");
AddToOptionList(document.frmMain.SubProblemType, "2", "Cincinatti");
AddToOptionList(document.frmMain.SubProblemType, "3", "Akron");
}
}
function ClearOptions(OptionList) {
for (x = OptionList.length; x >= 0; x = x - 1) {
OptionList[x] = null;
}
}
function AddToOptionList(OptionList, OptionValue, OptionText) {
OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}
Sample source output:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title>Process Alarm</title>
<script language="JavaScript" src="/scripts/test.js" type="javascript"></script>
</head><body><form method="get" action="/cgi-bin/test.cgi/test.cgi?null" enctype="multipart/form-data" name="frmMain" id="frmMain">
<select name="ProblemType" onchange="PopulateSType()" style="width:200">
<option value="1">Pennsylvania</option>
<option value="3">Ohio</option>
<option selected="selected" value="0"></option>
<option value="2">New York</option>
</select><select name="SubProblemType" style="width:200">
<option value=""></option>
</select></form></body></html>
Everything looks like it should work find, however when I load the page nothing happens with the second select option button. It seems hit or miss if the width style applies when the page loads. I've even tried window.onload = load; at the top of test.js. The only thing that I am seeing that may be amiss is perl is formatting onChange as onchange.
The java works fine in regular HTML, it just seems to have issues when trying to implement this in perl. I'm using an example from here