Changing Form Action URLs On-The-Fly (an Addendum)
The first Changing Form Action URLs On-The-Fly article
does a great job of providing exact how-to information to accomplish what the title suggests.
It shows you how to change a form's action="_____" URL on-the-fly, depending on which (if any) radio button or dropdown list item is checked by the form user.
It works great with method="post" and method="get" forms, unless the method="get" action URL contains a query string. (A query string would be anything coming after a "?" in a URL. For example, in URL http://example.com/?a=b&aa=bb, "a=b&aa=bb" is the query string.)
The reason an action URL with a query string rarely works is because a method="get" form, itself, generates a query string for the action URL. The result is a query string attached to the end of a query string. It might look something like http://example.com/?a=b&aa=bb?c=d (the two query strings are "a=b&aa=bb" and "c=d").
Form processing software designed to parse something like that is rare.
This addendum addresses effectively changing method="get" form action URLs on-the-fly when the action URL contains a query string.
Let's use this for the example form:
<form
name="myform"
method="get"
action="http://example.com/script.cgi">
Name:
<input
type="text"
name="name" />
<br />
Email:
<input
type="text"
name="email" />
<br />
Select one:
<input
checked="checked"
type="radio"
name="want" />Ice Cream
<input
type="radio"
name="want" />Cake
<br />
<input
type="submit"
onClick="return ActionDeterminator();" />
</form>
For the example, let's say when "Ice Cream" is checked, the action URL shall be http://example.com/script.cgi and when "Cake" is checked, the action URL shall be http://example.com/else.cgi?chocolate=yes
Browsers with JavaScript turned off will submit to the URL hard-coded into the form's action tag. The rest will have the action URL determined with a JavaScript function.
Here is the JavaScript function for the example:
<script type="text/javascript" name="JavaScript"><!--
function ActionDeterminator() {
var url = new String();
if(document.myform.want[0].checked == true) {
url = 'http://example.com/script.cgi?';
}
if(document.myform.want[1].checked == true) {
url = 'http://example.com/else.cgi?chocolate=yes&';
}
url += 'name=' + escape(document.myform.name.value) + '&' +
'email=' + escape(document.myform.email.value);
location.href = url;
return false;
}
//--></script>
The JavaScript creates a variable named "url," then constructs a URL to put into it.
First, it checks to see which radio button is checked. If the top one is checked, that's button zero, and the http://example.com/script.cgi? URL is assigned to it. Notice the "?" at the end of the URL. That's in anticipation of appending form values to the URL as a query string.
If the other radio button is checked, URL http://example.com/else.cgi?chocolate=yes& is assigned to variable url. Notice that this URL already has a query string. Notice also that it has a "&" at the end of the query string. That's in anticipation of appending form values to lengthen the query string.
After the URL for the checked radio button has been assigned to variable url, the form fields are turned into name="value" pairs separated with a "&" for appending to the URL. The form fields are name="name" and name="email".
Notice that the form field values are processed by the escape() function. That functions turns any illegal characters (illegal in URLs) into hexidecimal representations.
For example, if the form field name contained "Will Bontrager" and the email contained "will@example.com," then the name/value pairs would be constructed this way:
name="Will%20Bontrager&email=will@example.com"
The name/value pairs thus constructed are appended to the value of variable url.
Variable url now contains the correct URL and the browser is sent to that URL buy assigning the value of url to the browser.href variable.
The final action line returns the value of false to the form.
The return line might not be needed for most browsers. The browser should already be on its way to the url the JavaScript constructed. To make sure the form itself won't submit, however, we'll return a value of false.
So what happens is that the form itself is never submitted. Instead, the JavaScript constructs the URL with the correct query string and then sends the browser to that URL. With JavaScript, we can customize the URL as we please.
We can get away with doing that because the form is method="get". The form would have generated a URL with a query string, anyway.
The browser doesn't care how the URL is determined. It just goes where its told.
Consult the first Changing Form Action URLs On-The-Fly article
for method="post" forms, and method="get" forms where the action URL doesn't need to have a query string.
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
©Copyright 2007 Bontrager Connection, LLC 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.
