Submit form conditionally - JavaScript

Home |

		Home>Computer Programming>Javascript>

Submit form conditionally - JavaScript

By SiteArticles.com [Hits: 12828]

In the long-gone days of the early Internet, having a form onthe website was tantamount to dabbling with "cutting-edge"technologies. Intricate Perl scripts and esoteric CGI scriptswere required to process those forms and people used to sufferbouts of cold sweat whenever there manifested a need to use webforms. To create a form-handling script used to be in the realmsof MCAs and computer engineers. No longer is it so. The Internetthese days is replete with all sorts of form handling scripts,and wherever you choose to host your website, or for that mattereven a web page, you can easily deploy a form handling scriptand start interacting with your visitors.

As the level of interaction goes complex, you require morecomplicated scripts. One way is to write a single scriptcontaining hundreds of lines of code. The action script (thatcomes within

) encompassesnumerous if-then-else conditions, and even within theseconditions, there could be zillions of nested if-then-elseconditions. After a certain time it becomes a Herculean task tomaintain such a form handling script and unless you are an aviddocumenter, you'll lose the track in no time.

The second way is, write smaller scripts and let the form callthem according to the user input. This can save you hundreds oflines of coding, and even if it doesn't, it makes things a loteasier. Suppose you have a form that, along with other things,asks the visitor to which state she belongs. Then, when sheclicks the submit button, the action happens according the stateshe selected. If you have a single script and if you want thescript to act according to the individual state, you might endup writing a very large action script. On the other hand, if youspecifically write a script for, let us say, California; thenyou have to write code only centered around California and youcan, for the time being, forget about other states.

Javascript lets you submit a single form, conditionally, todifferent script. Here, we'll learn how to achieve this. First,let us go through a simple form:

Choice 1
Choice 2
Choice 3

As you can see, this form displays three radio buttons. Theobjective is, send the form to a script according to the radiobutton selected. Since some Javascript action needs to takeplace once the Submit button is clicked, we invokedecide_action() function through the onSubmit attribute of the

tag. Although we include the action attribute, it is leftblank. The other form fields are the usual ones. Now let us diveinto the cryptic world of the actual script that steers thesubmission.

This script contains two functions. The latter one,check_buttons(), makes sure that you select at least one optionbecause if you don't select an option, Javascript doesn't knowwhich form handling script to invoke. It first initializes avariable, ok, to false:

var ok=false;

then through a loop it checks all the radio buttons of the form.As soon as it encounters a radio button that is checked, itassigns the value true to ok

ok=true;

When the function, decide_action() encounters a true:

if(check_buttons()==true)

it first assigns a file name to the action attribute of theobject frm1 (the name of the form):

document.frm1.action=file_name;

and then calls the submit() function for that form:

document.frm1.submit();

The script uses multiple if-else decisions to check which radiobutton was selected, and then submits the form to a formhandling script accordingly.

Now, let us take both the functions: check_buttons() anddecide_action() to the next level. There can be varied number ofradio buttons to check. Why just limit to three radio buttons.The following code not only handles limitless radio buttons, italso assigns the name of the file accordingly (the value of theradio button should be the name of the respective action file).

This next version of the code is much smaller as it gets rid ofmultiple if-else statements. Since a particular set of radiobuttons is actually an array, we can loop through the array tofind out which button is checked. Then we can store the valuestored at that index location and return it to the callingfunction -- decide_action(). decide_action() this time uses thevalue returned, appends the extension ".php", assigns it to theaction attribute and then submits it.

This article has walked you through various concepts, butmainly, submitting form to different scripts according toselections made in the form.

Top Articles

*Using External JavaScript File
*Simplified form to mail: Unlim
*Capturing Video And Audio Stre
*Building HTML codes automatica
*How to handle web surfers, who
*Instant plug-in scripts that h
*Anti right-click pop up : pop
*Validating Numerical Input wit
*New Customizable JavaScript Me
*Ask Mr. D - JavaScript
*Inexpensive Area Rugs Give You
*Spice Up Your Web Site with Ja

Related Articles

*Inexpensive Area Rugs Give You
*New Customizable JavaScript Me
*Evaluation of Keywords for an
*Capturing Video And Audio Stre
*Ajaxgear Toolkit
*How to handle web surfers, who
*Simplified form to mail: Unlim
*Anti right-click pop up : pop
*On mouse over pop up: open pop
*Password protected document :
*Building HTML codes automatica
*Javascript Password Protection

Prev: Inexpensive Area Rugs Give Your Home The Facelift It Needs Next: New Customizable JavaScript Menu for Web Applications

Home | Site Map | Bookmark this site | T-XU RSS