简体   繁体   English

Perl CGI和JavaScript | 选择选项麻烦

[英]Perl CGI & JavaScript | Select Option troubles

I'm having a tough time trying to figure out why the following code isn't working: 我很难确定下面的代码为什么不起作用:

test.cgi: 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: 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; 我什至尝试过window.onload = load; at the top of test.js. 在test.js的顶部。 The only thing that I am seeing that may be amiss is perl is formatting onChange as onchange. 我所看到的唯一可能是不对的是perl,是将onChange格式化为onchange。

The java works fine in regular HTML, it just seems to have issues when trying to implement this in perl. Java在常规HTML中运行良好,试图在perl中实现它似乎只是有问题。 I'm using an example from here 我从这里使用一个例子

<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="text/javascript" ,这是浏览器支持的JS的MIME媒体类型。 type="javascript" on its own won't be recognised. 本身不会识别type="javascript" ( language="javascript" is obsolete.) language="javascript"已过时。)

style="width:200"

should be 200px . 应该是200px

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

Not sure null is guaranteed to work. 不确定null是否可以正常工作。 The traditional quick idiom is: 传统的快速成语是:

OptionList.length= 0;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM