View Full Version : Modern form menu
anthonysaulnier
07-31-2008, 05:12 AM
Basically what I want to do is modify my current form so that the users will automatically go to the requested portion of my web site without pressing go or submit. If possible, I want to use the same form values and variables that I have for my current menu.
My page is a static cgi page consisting of if statments, ie if user chooses then, then do that!
Its been a while for me, but I am attempting to get back into web programming and I was wondering if anyone has any ideas.
derzok
07-31-2008, 06:32 PM
This is a javascript question, actually. To save you the trouble: http://javascript.internet.com/navigation/jump-menu.html
anthonysaulnier
08-02-2008, 07:52 AM
Makes sense, and thats what I am trying now. I do have question, you can integrate javascript with html, and you can integrate html with perl and cgi, but is it possible to integrate javascript and cgi? Thats what I am trying to do now actually. I am not getting any page errors, but java related things are not showing.
anthonysaulnier
08-02-2008, 10:28 AM
Ok, so I did some research and came up with the following script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>test </head>
<BODY>
<script language="Javascript" type="text/javascript">
document.write("Hello World");
window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").
selectedIndex = 0;
document.getElementById("newLocation").
onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById
("newLocation");
var newPage = newLoc.options
[newLoc.selectedIndex].value;
if(newPage != "") {
window.Location = newPage;
}
}
</script>
<FORM method = "post" action = "test2.html">
<SELECT id = "newLocation">
<BR>
<OPTION selected="Selected">Select A Topic</OPTION>
<OPTION value = "home.html">Home</OPTION>
<OPTION value = "qualifications">Our Qualifications</OPTION>
<OPTION>About Us</OPTION>
<OPTION>Why Choose Us</OPTION>
<OPTION>Tips</OPTION>
<OPTION>Place an Online Service Call</OPTION>
<OPTION>Our Rewards Program</OPTION>
<OPTION>Web Site Design</OPTION>
<OPTION>Contact Us</OPTION>
<OPTION>Join Our Mailing List</OPTION>
<OPTION>Disclaimer</OPTION>
<OPTION>Employment</OPTION>
<OPTION>Maintenance Deals</OPTION>
<OPTION>Interesting Links</OPTION>
<OPTION>Price Guarantees</OPTION>
<OPTION>Flat Rate Internet Setup</OPTION>
<OPTION>Our Current Project List</OPTION>
<OPTION>Related Links</OPTION>
<OPTION>Current Service Areas</OPTION>
<OPTION>For Sale</OPTION>
<OPTION>Frequently Asked Questions</OPTION>
<OPTION>Checkout Our Chat Room</OPTION>
<OPTION>Users Guide To Firewalls</OPTION>
<OPTION>Learn About Scams</OPTION>
<OPTION>TEST YOUR COMPUTER TO SEE IF IT IS VISTA CAPABLE</OPTION>
</SELECT>
<noscript>
<input type="submit" value="submit" />
</noscript>
</FORM>
</BODY>
</HTML>
The problem is that when I make a selection, absolutely nothing happens. Its like the browser makes no attempt to even connect. At this point I dont really have any idea where I am going wrong. I picked up a book from the Visually Learning series, which is normally good, and followed the coding to a T, but no luck. I know that java does function because "Hello World" displays, and when I disable java the submit button does appear. Needless to say, im a bit confused at this point
FishMonger
08-02-2008, 05:16 PM
Your action attribute needs to point to a Perl (or some other) script, not to a static html page.
If you have a Perl question, we can help, otherwise this is a javascript question and I can move it to that area if you need more help.
oesxyl
08-02-2008, 05:56 PM
Makes sense, and thats what I am trying now. I do have question, you can integrate javascript with html, and you can integrate html with perl and cgi, but is it possible to integrate javascript and cgi? Thats what I am trying to do now actually. I am not getting any page errors, but java related things are not showing.
I guess you need ajax in this case. Javascript send request to cgi, perl process request, generate content and send response to javascript, javascript use response.
regards
anthonysaulnier
08-02-2008, 08:33 PM
Actually I normally use cgi to do most of my programming, i.e. integrate html tags with cgi into the same file. I tried pointing my script to my cgi script, and I also tried integrating java directly into my cgi script and got the same result, no errors, but nothing happens when I make a selection. I removed the submit button in the form and tested java by disabling java in the browser. When I did this the submit button appeared, which tells me that java is working somewhat at least. Now I am wondering if im missing something in Java as my cgi script works perfect otherwise.
#!/usr/bin/perl -w
# print "Content-type:text/html\n\n";
use CGI;
use CGI qw/:standard/;
#needed because we are displaying hyperlinks
$q = new CGI;
print $q->header;
print qq~<CENTER><IMG SRC="/businesssite/1.jpg" height="100" width="798"></CENTER>~;
$menuselect = $q->param('menuselect');
print "<HEAD><TITLE>Anthony Saulnier PC Repair and Network Consultant-<I>DOING IT RIGHT THE FIRST TIME</I></TITLE></HEAD>";
print qq~<h3 P ALIGN="CENTER"><I>DOING IT RIGHT THE FIRST TIME WITH QUALITY, HONESTY, AND THE MOST REASONABLE CONSULTATION AND SERVICE RATES</I></h3>~;
print qq~FOR YOUR CONVENIENCE, USE THE DROP DOWN MENU BELOW TO NAVIGATE THIS SITE . MAKE YOUR SELECTION THEN PRESS THE "SUBMIT" BUTTON~;
print "<HTML>";
print "<BODY>";
print qq~<script language="Javascript" type="text/javascript">~;
print qq~window.onload = initform;~;
print qq~window.onunload = function(){};~;
print qq~function initform() { ~;
print qq~document.getElementById("menuselect").selectedIndex = 0; ~;
print qq~document.getElementById("menuselect").onchange = jumpPage; ~;
print qq~ } ~;
print qq~function jumpPage() { ~;
print qq~var newLoc = document.getElementById("menuselect"); ~;
print qq~var newPage = newLoc.options[24].value; ~;
print qq~if(newPage != "") { ~;
print qq~ window.Location = newPage; ~;
print qq~ } ~;
print qq~} ~;
print qq!</script>!;
print "</BODY>";
print qq~<FORM method = "post" action = "site1newjan2007.cgi">~;
print qq~<SELECT ID = "menuselect">~;
print "<BR>";
print "<OPTION>Home</OPTION>";
print "<OPTION>Our Qualifications</OPTION>";
print "<OPTION>About Us</OPTION>";
print "<OPTION>Why Choose Us</OPTION>";
print "<OPTION>Tips</OPTION>";
print "<OPTION>Place an Online Service Call</OPTION>";
print "<OPTION>Our Rewards Program</OPTION>";
print "<OPTION>Web Site Design</OPTION>";
print "<OPTION>Contact Us</OPTION>";
print "<OPTION>Join Our Mailing List</OPTION>";
print "<OPTION>Disclaimer</OPTION>";
print "<OPTION>Employment</OPTION>";
print "<OPTION>Maintenance Deals</OPTION>";
print "<OPTION>Interesting Links</OPTION>";
print "<OPTION>Price Guarantees</OPTION>";
print "<OPTION>Flat Rate Internet Setup</OPTION>";
print "<OPTION>Our Current Project List</OPTION>";
print "<OPTION>Related Links</OPTION>";
print "<OPTION>Current Service Areas</OPTION>";
print "<OPTION>For Sale</OPTION>";
print "<OPTION>Frequently Asked Questions</OPTION>";
print "<OPTION>Checkout Our Chat Room</OPTION>";
print "<OPTION>Users Guide To Firewalls</OPTION>";
print "<OPTION>Learn About Scams</OPTION>";
print "<OPTION>TEST YOUR COMPUTER TO SEE IF IT IS VISTA CAPABLE</OPTION>";
print qq~</SELECT>~;
print "<noscript>";
print qq~<INPUT TYPE = "submit" name = "submit" value = "submit">~;
print "</noscript>";
print "</FORM>";
print "</HTML>";
I guess maybe if you guys cant see anything we can perhaps pass this on to the Java forum.
Thanks for your help
anthonysaulnier
08-02-2008, 08:35 PM
Yes maybe if this doesnt work I will look into Ajax, thanks for the suggestion. Im pretty new to javascript.
oesxyl
08-02-2008, 09:22 PM
please put your code between [ code] and [ /code] tags. You can edit your posts. Thank you.
not a error, but code is easy to read if you don't use so many print.
window.onload I guess it must be before </script>, onunload don't do nothing( probably you want to develop later or override something), not sure if newLoc.options[24] will select something.
print qq~<script language="Javascript" type="text/javascript">
window.onload = initform;
window.onunload = function(){};
function initform(){
document.getElementById("menuselect").selectedIndex = 0;
document.getElementById("menuselect").onchange = jumpPage;
}
function jumpPage(){
var newLoc = document.getElementById("menuselect");
var newPage = newLoc.options[24].value;
if(newPage != ""){
window.Location = newPage;
}
}
</script>~;
you must look into your error log for errors and/or output in the browser.
print the params from post to see if are what you expect.
btw, I use perl with ajax and work very well, :)
add to your scripts:
#!/usr/bin/perl
use strict;
use warnings;
Actually I normally use cgi to do most of my programming, i.e. integrate html tags with cgi into the same file. I tried pointing my script to my cgi script, and I also tried integrating java directly into my cgi script and got the same result, no errors, but nothing happens when I make a selection. I removed the submit button in the form and tested java by disabling java in the browser. When I did this the submit button appeared, which tells me that java is working somewhat at least. Now I am wondering if im missing something in Java as my cgi script works perfect otherwise.
#!/usr/bin/perl -w
# print "Content-type:text/html\n\n";
use CGI;
use CGI qw/:standard/;
#needed because we are displaying hyperlinks
$q = new CGI;
print $q->header;
print qq~<CENTER><IMG SRC="/businesssite/1.jpg" height="100" width="798"></CENTER>~;
$menuselect = $q->param('menuselect');
print "<HEAD><TITLE>Anthony Saulnier PC Repair and Network Consultant-<I>DOING IT RIGHT THE FIRST TIME</I></TITLE></HEAD>";
print qq~<h3 P ALIGN="CENTER"><I>DOING IT RIGHT THE FIRST TIME WITH QUALITY, HONESTY, AND THE MOST REASONABLE CONSULTATION AND SERVICE RATES</I></h3>~;
print qq~FOR YOUR CONVENIENCE, USE THE DROP DOWN MENU BELOW TO NAVIGATE THIS SITE . MAKE YOUR SELECTION THEN PRESS THE "SUBMIT" BUTTON~;
print "<HTML>";
print "<BODY>";
print qq~<script language="Javascript" type="text/javascript">~;
print qq~window.onload = initform;~;
print qq~window.onunload = function(){};~;
print qq~function initform() { ~;
print qq~document.getElementById("menuselect").selectedIndex = 0; ~;
print qq~document.getElementById("menuselect").onchange = jumpPage; ~;
print qq~ } ~;
print qq~function jumpPage() { ~;
print qq~var newLoc = document.getElementById("menuselect"); ~;
print qq~var newPage = newLoc.options[24].value; ~;
print qq~if(newPage != "") { ~;
print qq~ window.Location = newPage; ~;
print qq~ } ~;
print qq~} ~;
print qq!</script>!;
print "</BODY>";
print qq~<FORM method = "post" action = "site1newjan2007.cgi">~;
print qq~<SELECT ID = "menuselect">~;
print "<BR>";
print "<OPTION>Home</OPTION>";
print "<OPTION>Our Qualifications</OPTION>";
print "<OPTION>About Us</OPTION>";
print "<OPTION>Why Choose Us</OPTION>";
print "<OPTION>Tips</OPTION>";
print "<OPTION>Place an Online Service Call</OPTION>";
print "<OPTION>Our Rewards Program</OPTION>";
print "<OPTION>Web Site Design</OPTION>";
print "<OPTION>Contact Us</OPTION>";
print "<OPTION>Join Our Mailing List</OPTION>";
print "<OPTION>Disclaimer</OPTION>";
print "<OPTION>Employment</OPTION>";
print "<OPTION>Maintenance Deals</OPTION>";
print "<OPTION>Interesting Links</OPTION>";
print "<OPTION>Price Guarantees</OPTION>";
print "<OPTION>Flat Rate Internet Setup</OPTION>";
print "<OPTION>Our Current Project List</OPTION>";
print "<OPTION>Related Links</OPTION>";
print "<OPTION>Current Service Areas</OPTION>";
print "<OPTION>For Sale</OPTION>";
print "<OPTION>Frequently Asked Questions</OPTION>";
print "<OPTION>Checkout Our Chat Room</OPTION>";
print "<OPTION>Users Guide To Firewalls</OPTION>";
print "<OPTION>Learn About Scams</OPTION>";
print "<OPTION>TEST YOUR COMPUTER TO SEE IF IT IS VISTA CAPABLE</OPTION>";
print qq~</SELECT>~;
print "<noscript>";
print qq~<INPUT TYPE = "submit" name = "submit" value = "submit">~;
print "</noscript>";
print "</FORM>";
print "</HTML>";
I guess maybe if you guys cant see anything we can perhaps pass this on to the Java forum.
Thanks for your help
FishMonger
08-02-2008, 11:33 PM
Java and Javascript are two completely different animals.
There are a number of problems with both your html code and perl code and, while I'm not real knowledgeable on javascript, I'm sure there are a number of problems with that coding as well.
Javascript can be put in the body section, however, in general I'd put it in the head section.
You have several portions backwards. After specifying the doctype (i.e. $q->header), the <html> tag goes first, then the <head>...</head> section, then the <body>...</body> section, then the closing </html> tag.
You need to learn about the different methods Perl has for outputing multiple lines of html. Using a print statement for each and every line is the worst approach. Instead, you could/should use a "here document".
Here's a partially cleaned up version of your script.
#!/usr/bin/perl
use strict;
use warnings;
use CGI;
use CGI::Carp qw/fatalsToBrowser warningsToBrowser/;
my $q = new CGI;
my $menuselect = $q->param('menuselect');
my $javascript = <<"JSCRIPT";
window.onload = initform;
window.onunload = function(){};
function initform() {
document.getElementById("menuselect").selectedIndex = 0;
document.getElementById("menuselect").onchange = jumpPage; ~;
}
function jumpPage() {
var newLoc = document.getElementById("menuselect");
var newPage = newLoc.options[24].value;
if(newPage != "") {
window.Location = newPage;
}
}
JSCRIPT
print $q->header,
$q->start_html(
-title => 'Anthony Saulnier PC Repair and Network Consultant-DOING IT RIGHT THE FIRST TIME',
-script => { -type =>'JAVASCRIPT', -code => $javascript },
-onLoad => 'initform()'
);
warningsToBrowser(1);
print <<HTML;
<CENTER><IMG SRC="/businesssite/1.jpg" height="100" width="798"></CENTER>
<h3 P ALIGN="CENTER"><I>DOING IT RIGHT THE FIRST TIME WITH QUALITY, HONESTY, AND THE MOST REASONABLE CONSULTATION AND SERVICE RATES</I></h3>
FOR YOUR CONVENIENCE, USE THE DROP DOWN MENU BELOW TO NAVIGATE THIS SITE . MAKE YOUR SELECTION THEN PRESS THE "SUBMIT" BUTTON
<FORM method = "post" action = "site1newjan2007.cgi">
<SELECT ID = "menuselect">
<BR>
<OPTION>Home</OPTION>
<OPTION>Our Qualifications</OPTION>
<OPTION>About Us</OPTION>
<OPTION>Why Choose Us</OPTION>
<OPTION>Tips</OPTION>
<OPTION>Place an Online Service Call</OPTION>
<OPTION>Our Rewards Program</OPTION>
<OPTION>Web Site Design</OPTION>
<OPTION>Contact Us</OPTION>
<OPTION>Join Our Mailing List</OPTION>
<OPTION>Disclaimer</OPTION>
<OPTION>Employment</OPTION>
<OPTION>Maintenance Deals</OPTION>
<OPTION>Interesting Links</OPTION>
<OPTION>Price Guarantees</OPTION>
<OPTION>Flat Rate Internet Setup</OPTION>
<OPTION>Our Current Project List</OPTION>
<OPTION>Related Links</OPTION>
<OPTION>Current Service Areas</OPTION>
<OPTION>For Sale</OPTION>
<OPTION>Frequently Asked Questions</OPTION>
<OPTION>Checkout Our Chat Room</OPTION>
<OPTION>Users Guide To Firewalls</OPTION>
<OPTION>Learn About Scams</OPTION>
<OPTION>TEST YOUR COMPUTER TO SEE IF IT IS VISTA CAPABLE</OPTION>
</SELECT>
<noscript>
<INPUT TYPE = "submit" name = "submit" value = "submit">
</noscript>
</FORM>
HTML
print $q->end_html;
FishMonger
08-03-2008, 12:38 AM
Here's a working example pulled from the CGI documentation that uses Javascript.
#!/usr/bin/perl
use CGI qw/:standard/;
$query = new CGI;
print header;
$JSCRIPT=<<END;
// Ask a silly question
function riddle_me_this() {
var r = prompt("What walks on four legs in the morning, " +
"two legs in the afternoon, " +
"and three legs in the evening?");
response(r);
}
// Get a silly answer
function response(answer) {
if (answer == "man")
alert("Right you are!");
else
alert("Wrong! Guess again.");
}
END
print start_html(-title=>'The Riddle of the Sphinx',
-script=>$JSCRIPT,
-onLoad => 'riddle_me_this()');
print end_html();
anthonysaulnier
08-08-2008, 01:28 PM
http://www.openkomodo.com/ . Not sure if this would be of any use to you folks, but apparently it has tools for debugging scripts. Just thought id pass it along. Another friend of mine in the IT industry recommended it.
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.