Home/ Questions/Q 966237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T02:07:34+00:00

I’m having a tough time trying to figure out why the following code isn’t

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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;
    • 0