Submit a Form To a Web Page
Sometimes it's desirable for form submission results to be
printed on the same page as the form. The form can then
be used again without clicking to another web page.
I'll show you a way to do that.
The method I'll show you will also allow form users to
bookmark the page with the results they want to keep.
Overview
The form is submitted to the web page containing the form. (Yes, you read it right.)
Perhaps it's best to have an example. One is ready for you
at /submitsamepage
This is how it works:
-
When the form is submitted to the same web page the
form is on, it's submitted with method="GET". This
causes a URL with parameters to be sent to the
browser.
(A URL with parameters is a URL followed with a
question mark followed with more data; in this case,
the data pertaining to the form submission.)
-
When the browser arrives at the web page (the
same web page, but reloaded with the parameters),
JavaScript extracts the parameter data and sends
it to a CGI script.
-
The CGI script returns the results to the JavaScript
and the JavaScript prints it on the web page.
The web page now contains the results of the form submission
as well as the same form that the user can use again.
Implementation
Three parts need to work together:
-
The form.
-
The JavaScript.
-
The CGI script.
The form and the JavaScript are both on the same web page.
The CGI script is on the server.
Let's do the web page first.
1. The form.
Here is a form that will work with the example
implementation.
<form method="GET">
Type something: <input type="text" name="one"><br>
Type something else: <input type="text" name="two"><br>
One more time: <input type="text" name="three"><br>
<input type="submit">
</form>
Notice that the form has no action="______" attribute.
Without that attribute, the form will submit to the same
web page that contains the form. You may use the attribute,
if you wish, so long as the URL is to this web page.
Notice also that the method is "GET".
2. The JavaScript.
When the form is submitted to the web page, JavaScript
extracts the parameters (anything following a question
mark in the URL of the browser's address bar). It then
sends the parameter information to the CGI script.
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2005 Bontrager Connection, LLC
var url = "http://example.com/cgi-bin/submitsamepage.cgi";
var thisurl = location.href;
var questionlocation = thisurl.indexOf('?');
if(questionlocation > 0) {
url += thisurl.substr(questionlocation);
}
document.writeln('<sc' + 'ript ');
document.writeln(' type="text/javascript" ');
document.writeln(' language="JavaScript" ');
document.writeln(' src="' + url + '">');
document.writeln('</sc' + 'ript>');
//-->
</script>
The value of the "url" variable (line three of the above
JavaScript), between the quotation marks, needs to be the
URL of the CGI script on your server.
When the JavaScript sends the parameter information to
the CGI script, the CGI script replies with content. The
JavaScript then prints the content the CGI script replied
with.
Making the web page
Put the form and the JavaScript on the same web page.
The JavaScript should be located wherever you want the data
printed that the CGI script replies with. (In this example,
the data the CGI script replies with is an HTML table
containing the values submitted with the form.)
The web page must be uploaded onto your server for this
system to work.
3. The CGI script.
No modifications need be made to the CGI script for working
with this system. Because of that, and because the script
is over 35 lines long, we won't print the script itself in
this article.
The CGI script, with an example web page containing
the form and the JavaScript, can be downloaded from
/submitsamepage example page.
Install the CGI script the same way other CGI scripts are
installed — verify first line reflects the location of
perl on your server, upload as plain text instead of binary,
give the file 755 permissions.
Testing
To test and use the system, send your browser to the URL of
the web page you uploaded to your server.
When you submit the form, the same page should reload but
with the form information printed at the location where the
JavaScript was put.
An interesting (and more complicated) implementation of this
method at /sbot offers a form to display
what search engine spiders see when they scan your web page.
It may spark your imagination for what can be created when you
"submit a form to a web page".
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2005 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
