onChange + javascript in perl CGI - question

Hello all,

Am trying to include a onChange java script to my perl CGI application which uses POST method to upload files to file_server

This is how I embedded javascript in the perl code that renders CGI application

print qq|
  <script type="text/javascript" src="display.js">
  </script>
  |;

Contents of display javascript are :

function changeDispatch(newLink) {
  if ( newLink != null ) {
    document.location.href = newLink;
  }
}

This is the popup menu, when an item is selected from the list it should automatically trigger the action designation instead of a separate "GO" ( submit ) button for each of the popup menu that I have got.

print $cgi->popup_menu(-name=>'fruits',
                         -values=>$fruits_arr,
                         -onChange=>"changeDispatch('$arg')");

Here in '$arg' if am able to store the selected value from the popup_menu, then its quite easy to formulate a string and pass it to changedDispatch in javascript.
But am not able to retrieve any such data

Whats happening :
If I click on any of the fruits say, "apple" the onClick effect is happening and it comes to the same initial page. If that is, fruits.cgi once I click that - it again comes to fruits.cgi as though it has been loaded for the first time

What I want to happen :
Based on the onClick event, I have other functions to be dispatched via GUI. That would seem to happen only when I know what option is clicked.

I accept that am not that good when it comes to GUI design or adding effects to that.

I have seen several website doing this, it should be something very easy for those who had already worked on this.
Could you please provide some pointers ?

thanks :slight_smile:

You did not show anything about the onClick, but I assume if you want to capture onChange you ought not be implementing onClick? Even though theoretically they do not interfere if you do them properly, it may be a source of confusion unless you know you are doing it the right way.

Do you get any expected values for $arg? Seems like from your post you don't but I am not totally clear about that. If so, you should first concentrate on getting $arg to carry the value you expect first.

How do you get the value of $arg? I assume you used CGI->param()?

By the way, have you tested the changeDispatch() Javascript function separately using a static HTML test page before? If you look at DOM:document.location - MDC there is a note saying the use of document.location.href as a write property is not portable. In fact I have only used

window.location = url;

in the past. I have not seen anyone making a redirect like you did (using document.location.href) before. Are you sure that function is working properly?

If everything fails, I suggest you to:

(1) Check the Javascript debugger for any relevant error messages
(2) Re-post with the HTML generated by Perl. Because your issue is not related to Perl but HTML and Javascript, the abstraction by Perl CGI may mask investigation.

Thanks for the reply. ( Am replying back after a long time, sorry about that )

Here is what am trying to achieve.

Using a "submit" button, everything works correctly. But I would like to achieve the same just by clicking any of the options in "pop_up" menu using a java script.

I tried several other forms as posted above but I could not get none of them to work for my case ( I know I missed something very badly )

Could you please help me with that ?

This is just a quick code that I wrote to demonstrate what am trying to do and what is the problem in doing so. There are so many mistakes that are unrelated to the post, please ignore them.

Thanks for the reply again in advance :slight_smile:

#! /opt/third-party/bin/perl

use strict;
use warnings;

use CGI qw/:standard *table/;

my $cgi = CGI->new();

print $cgi->header('text/html');

sub generateHeader {
  print $cgi->start_html(-title=>'Sample Test');
  print $cgi->h3({-align=>'center'}, 'Sample Test Display');
  print $cgi->start_form(-method => 'GET',
                         -name => 'main_form',
                         -action => 'test.cgi',
                         -enctype => 'multipart/form-data');
}

sub submitButtonGenerator {
  my $button_name = shift;
  print $cgi->submit(-value=>$button_name);
}

sub generateFooter {
  my ($i, $tmp);

  print $cgi->end_form();
  print $cgi->hr();

  print $cgi->end_html();
}

sub display {
 my @arr = ('IceCream', 'Choco', 'Biscuit', 'Fruits');
 my $edible_arr = \@arr;

 print $cgi->popup_menu(-name=>'edible',
                         -values=>$edible_arr);

}

sub displayResult {
  print $cgi->param("edible") . $cgi->br();
}

generateHeader;
display;
print $cgi->br();
print $cgi->br();
submitButtonGenerator("Go");
displayResult;
generateFooter;

exit(0);

You meant this?

#! /opt/third-party/bin/perl

use strict;
use warnings;

use CGI qw/:standard *table/;

my $cgi = CGI->new();

print $cgi->header('text/html');

sub generateHeader {
  print $cgi->start_html(-title=>'Sample Test');
  print $cgi->h3({-align=>'center'}, 'Sample Test Display');
  print $cgi->start_form(-method => 'GET',
                         -id => 'main_form',
                         -name => 'main_form',
                         -action => 'test.cgi',
                         -enctype => 'multipart/form-data');
}

sub submitButtonGenerator {
  my $button_name = shift;
  print $cgi->submit(-value=>$button_name);
}

sub generateFooter {
  my ($i, $tmp);

  print $cgi->end_form();
  print $cgi->hr();

  print $cgi->end_html();
}

sub display {
 my @arr = ('IceCream', 'Choco', 'Biscuit', 'Fruits');
 my $edible_arr = \@arr;

 print $cgi->popup_menu(-name=>'edible',
              -onChange => q/document.getElementById('main_form').submit()/,
                         -values=>$edible_arr);

}

sub displayResult {
  print $cgi->param("edible") . $cgi->br();
}

generateHeader;
display;
print $cgi->br();
print $cgi->br();
submitButtonGenerator("Go");
displayResult;
generateFooter;

exit(0);

Perfectly yes ! :slight_smile:

This is what I have been looking for. Thank you very much for this.

I will build rest of my application using this as a starting point.