Perl CGI & JavaScript | Select Option troubles

Question

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

Answer 1

<script language="JavaScript" src="/scripts/test.js" type="javascript">

It should be type="text/javascript" , the MIME media type for JS that browsers support. type="javascript" on its own won't be recognised. ( language="javascript" is obsolete.)

style="width:200"

should be 200px .

for (x = OptionList.length; x >= 0; x = x - 1) {
   OptionList[x] = null;
}

Not sure null is guaranteed to work. The traditional quick idiom is:

OptionList.length= 0;

Perl CGI & JavaScript | Select Option troubles

Question

1 answers

solution1
1 ACCPTED 2010-08-05 13:43:33

Perl CGI & JavaScript | Select Option troubles

Question

1 answers

solution1 1 ACCPTED 2010-08-05 13:43:33

solution1
1 ACCPTED 2010-08-05 13:43:33