Changing Form Action URLs On-The-Fly
Sometimes a person just needs to be able to do more with a
form.
Today, I'll show you how to change the action="_____" URL
on-the-fly, depending on which (if any) radio button is
checked by the form user. Drop-down lists could be
substituted for radio buttons.
You might not need such functionality for your site at the
present time. But when you need it, you'll really need it.
For example, if you use the free Master Feedback from
/a/20h/pl.pl?msmf
to handle your forms, you may want to have the form results
sent to a different address under certain conditions. Or,
you may want a different "thank you" page. Depending on
your particular implementation, you might even want to
change the form's method="_____" value.
This article shows you how.
(The Master Form V3 CGI program from
/a/20h/pl.pl?mfV3
already allows multiple emails, choice of database formats,
and choice of "thank you" pages. If you already have Master
Form V3 on your site, you probably won't need to add this
functionality.)
Using the method described here, you would have more than
one copy of Master Feedback installed. The installed scripts
can have different file names, or they can be installed in
different cgi-bin subdirectories.
Without getting into a description of every nuance, there
are nevertheless several things that need to be mentioned
for a good understanding of how to implement this feature
into your site. Each mention will have examples of code,
HTML or JavaScript.
At the end of this article is the entire example.
Mention #1
The form must have a name. Also, the action="_____" should
have a URL. Example:
<form name="myform" action="/cgi-bin/mf.cgi" method="post">
The name is so the JavaScript can modify the other attributes.
The action is the default URL. This is where the form will
be submitted to if the user does not click a radio button or
if the user's browser is not JavaScript-enabled. If there is
no default URL, and no other URL is provided, then the
browser will submit to the current page.
The method should be whatever the script/page at the default
action="_____" URL expects.
Mention #2
The radio buttons that are the key for the JavaScript to
determine the action="_____" URL don't necessarily need
to have a value attribute. If your CGI scripts require
values, you of course provide them, but they're not
required for the JavaScript presented today.
Examples:
<input type="radio" name="reason">I have a Hot Tip!<br>
<input type="radio" name="reason">I saw a Cool Site!<br>
<input type="radio" name="reason">Get me outta here!<br>
Mention #3
The JavaScript can be anywhere on your page, in the HEAD
area, in the BODY area above the form, or anywhere else
that makes sense to you.
Mention #4
When JavaScript is used to consult a radio button to see
whether or not it is checked, the first radio button in
the set is button 0, the second button 1, and so forth.
To consult a radio button, both the form name and the name
of the radio button's set are required. This JavaScript
example consults the first radio button of the set to see
if it's true that the button is checked:
if(document.myform.reason[0].checked == true)
Then if the button is checked, it proceeds to change the
form's action="_____" URL to '/cgi-bin/mf1.cgi' -- like
this:
if(document.myform.reason[0].checked == true) {
document.myform.action = '/cgi-bin/mf1.cgi';
}
Method #5
The JavaScript function must return a true value.
Otherwise, the browser won't submit the form. Thus,
you'll find
return true;
as the last line of the JavaScript function.
If you have a long list of radio button values to check,
over a dozen or two, for example, then you might insert the
return true;
line as the last line of each if(...) statement. That would
allow the JavaScript return as soon as a match is made and
not have to check the rest of the if(...) statements.
Example:
if(document.myform.reason[0].checked == true) {
document.myform.action = '/cgi-bin/mf1.cgi';
return true;
}
Mention #6
The submit button of the form is what causes the JavaScript
to run. It's an onClick attribute:
<input
type="submit"
value="Send It!"
onClick="return ActionDeterminator();">
When clicked, the JavaScript function ActionDeterminator()
determines the alternate action URL.
The Complete Example
With the above mentions, the example code should make sense
to you. If it doesn't, send a private note to me at the
email address following the article. I'll try to answer
your questions.
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2003 Bontrager Connection, LLC
// See article "Changing Form Action URLs On-The-Fly" linked
// from URL /library/archives
// for more information about how to use this code.
function ActionDeterminator()
{
if(document.myform.reason[0].checked == true) {
document.myform.action = '/cgi-bin/mf1.cgi';
}
if(document.myform.reason[1].checked == true) {
document.myform.action = '/cgi-bin/mf2.cgi';
document.myform.method = 'get';
}
if(document.myform.reason[2].checked == true) {
document.myform.action = 'http://yahoo.com';
}
return true;
}
// -->
</script>
<form name="myform" method="post" action="/cgi-bin/mf.cgi">
Name: <input type="text" name="a name" size="22"><br>
Email: <input type="text" name="email"size="22"><br>
Reason:<br>
<input type="radio" name="reason">I have a Hot Tip!<br>
<input type="radio" name="reason">I saw a Cool Site!<br>
<input type="radio" name="reason">Get me outta here!<br>
Type comment here:<br>
<textarea name="comments" cols="27" rows="6">
</textarea><br><br>
<input
type="submit"
value="Send It!"
onClick="return ActionDeterminator();">
</form>
(end of example code)
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
©2003 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.
