///Changing Form Action URLs On-The-Fly

Changing Form Action URLs On-The-Fly

Mention #2, 3 & 4

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)

Introduction

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 from http://willmaster.com/a/20t/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.

2010-05-26T17:15:09+00:00 September 3rd, 2003|JavaScript|0 Comments

About the Author:

Leave A Comment