Changing Your HTML Form Action URLs On-The-Fly
By
William
Bontrager
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
http://willmaster.com/a/20t/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 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 http://willmaster.com/possibilities/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)
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
