Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

pass value from onChange to a sub 1

Status
Not open for further replies.

max1x

Programmer
Jan 12, 2005
366
0
0
US
I have an options filed, which pulls data from a flat file. I can get the value user chose via JAVASCRIPT but am not sure how to pass it to a perl sub, which eventually will provide data to the 2nd options filed.

i.e popup_menu(-name=>'fField', -values=>'(sort @fChoice)'),-onChange=>'getValue(this)');

so based on getValue(strng) -> pass to sub, which will provide data fro 2nd Options filed.



 
Hi

While JavaScript is executed on client side and Perl on the server side, you can not do that directly.

You have to use AJAX and to ask help for it in forum1600.

Feherke.
 
Thx Feherke. I was afraid of that as I cannot download any new modules.
 
Hi

Unpleasant. AJAX is useful because deals with browser and version differences. But in fact it only uses an [tt]XMLHttpRequest[/tt] class, which you can do "by hand".

Or you can use poor man's AJAX solution : put a hidden [tt]iframe[/tt] on the page, request the URL to your CGI into it, then process the result.

Or just force the reload of the included JavaScript file which is generated by the CGI :
Code:
<html>
<head>
<script type="text/javascript">
var src=[i]'/cgi-bin/secondvalue.pl'[/i];

[b]function[/b] request()
{
  [b]var[/b] jsl=document.getElementsByTagName([i]'script'[/i]);
  [b]for[/b] ([b]var[/b] i=0;i<jsl.length;i++) [b]if[/b] (jsl[i].src=src) jsl[i].parentNode.removeChild(jsl[i]);

  [b]var[/b] ty=document.fo.se.options[document.fo.se.selectedIndex].value;

  [b]var[/b] js=document.createElement([i]'script'[/i]);
  js.setAttribute([i]'src'[/i],src+[i]'?type='[/i]+ty);
  document.getElementsByTagName([i]'head'[/i])[0].appendChild(js);
}

[b]function[/b] populate()
{
  [b]while[/b] (document.fo.se2.options.length) document.fo.se2.options[document.fo.se2.options.length-1]=[b]null[/b];
  [b]for[/b] ([b]var[/b] i=0;i<va.length;i++) document.fo.se2.options[i]=[b]new[/b] Option(va[i]);
}
</script>
<script type="text/javascript" src="/cgi-bin/secondvalue.pl"></script>
</head>
<body>
<form name="fo">
<select name="se" onchange="request()">
<option value="">- select -</option>
<option value="a">animal</option>
<option value="p">plant</option>
</select>
<select name="se2">
</select>
</form>
</body>
</html>
Code:
[highlight #eee]#!/usr/bin/perl[/highlight]

print [i]"Content-type: text/javascript\r\n\r\n"[/i];

$ty=$ENV{[i]"QUERY_STRING"[/i]};
$ty=~s/.*=//;

print [i]"var va=new Array("[/i];
switch: {
  [b]if[/b] ($ty eq [i]"a"[/i]) { print [i]"'cat','dog','fish'"[/i]; [b]last[/b] switch; }
  [b]if[/b] ($ty eq [i]"p"[/i]) { print [i]"'apple','cactus','lotus'"[/i]; [b]last[/b] switch; }
}
print [i]");\n"[/i];
print [i]"populate();\n"[/i] [b]if[/b] $ty;
Tested with FireFox, Opera and Explorer.

Feherke.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top