Perl CGI & JavaScript | Sélectionner une option trouble

Je suis un moment difficile essayer de comprendre pourquoi le code suivant ne fonctionne pas:Perl CGI & JavaScript | Sélectionner une option trouble

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); 
}

Exemple de sortie de source:

<?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>

Tout semble devoir fonctionner d, cependant quand je charge la page rien ne se passe avec le second bouton d'option de sélection. Cela semble aléatoire si le style de largeur s'applique au chargement de la page. J'ai même essayé window.onload = load; en haut de test.js. La seule chose que je vois qui peut être mal est perl est le format onChange comme onchange. Le java fonctionne bien en HTML normal, il semble juste avoir des problèmes en essayant de l'implémenter en perl. J'utilise un exemple de here

Source

2010-08-05 Mose

Vous dites que rien ne se passe avec le second bouton de sélection. Je ne vois aucun bouton ici. aussi, que devrait-il se passer au lieu de rien? – mkoryak

La page affichera 2 groupes d'options de sélection (Désolé, j'ai dit le bouton, mais c'est la sélection à laquelle je fais référence). Basé sur ce que vous sélectionnez dans la première sélection déterminera comment le second est peuplé. http://www.petenelson.com/aspwatch/Option%20List%20Examples.htm Le lien ci-dessus est le site dans lequel j'ai trouvé le javascript, et montre ce que j'essaie d'atteindre. – Mose

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

Il devrait être type="text/javascript", le type de support MIME pour JS que les navigateurs compatibles. type="javascript" seul ne sera pas reconnu. (language="javascript" est obsolète.)

style="width:200"

devrait être 200px.

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

Vous n'êtes pas certain que null fonctionne. L'idiome rapide traditionnel est:

OptionList.length= 0;

Source

2010-08-05 13:43:33 bobince

Modification de la ligne suivante: $ cgi-> start_html (-title => 'Test', - script => [{- type => 'texte/javascript', - src => '/ scripts/test.js'} ]); Sorties: La deuxième option ne fonctionne toujours Sélectionnez remplit pas. l'ajout de px a corrigé le problème de taille bien que :) – Mose

Toujours rien après OptionList.length = 0; – Mose

Est-ce que Javascript a des problèmes de sensibilité à la casse concernant la méthode onChange? – Mose

Perl CGI & JavaScript | Sélectionner une option trouble

Répondre

Questions connexes