Subscribe Now

Receive alert message from us when new articles submitted to our site for free.

Enter Your Name
Enter Your E-Mail

Sponsors

Internet Marketing
Business Letter
Nursing job opportunities


Categories



Search the Articles


Sign Up Here

Home / Computer Programming / Javascript


Print | Send To Friends | Add To Favorites | Comment

Submit form conditionally - JavaScript

By: SiteArticles.com

Article Word Count: 1332 words  [Comments (0)]
Total Views: 96 Views






In the long-gone days of the early Internet, having a form on




the website was tantamount to dabbling with "cutting-edge"




technologies. Intricate Perl scripts and esoteric CGI scripts




were required to process those forms and people used to suffer




bouts of cold sweat whenever there manifested a need to use web




forms. To create a form-handling script used to be in the realms




of MCAs and computer engineers. No longer is it so. The Internet




these days is replete with all sorts of form handling scripts,




and wherever you choose to host your website, or for that matter




even a web page, you can easily deploy a form handling script




and start interacting with your visitors.









As the level of interaction goes complex, you require more




complicated scripts. One way is to write a single script




containing hundreds of lines of code. The action script (that




comes within
) encompasses




numerous if-then-else conditions, and even within these




conditions, there could be zillions of nested if-then-else




conditions. After a certain time it becomes a Herculean task to




maintain such a form handling script and unless you are an avid




documenter, you'll lose the track in no time.









The second way is, write smaller scripts and let the form call




them according to the user input. This can save you hundreds of




lines of coding, and even if it doesn't, it makes things a lot




easier. Suppose you have a form that, along with other things,




asks the visitor to which state she belongs. Then, when she




clicks the submit button, the action happens according the state




she selected. If you have a single script and if you want the




script to act according to the individual state, you might end




up writing a very large action script. On the other hand, if you




specifically write a script for, let us say, California; then




you have to write code only centered around California and you




can, for the time being, forget about other states.









Javascript lets you submit a single form, conditionally, to




different script. Here, we'll learn how to achieve this. First,




let us go through a simple form:













value="one" /> Choice 1




value="two" /> Choice 2




value="three" /> Choice 3




value="Submit" />










As you can see, this form displays three radio buttons. The




objective is, send the form to a script according to the radio




button selected. Since some Javascript action needs to take




place once the Submit button is clicked, we invoke




decide_action() function through the onSubmit attribute of the




tag. Although we include the action attribute, it is left




blank. The other form fields are the usual ones. Now let us dive




into the cryptic world of the actual script that steers the




submission.



















This script contains two functions. The latter one,




check_buttons(), makes sure that you select at least one option




because if you don't select an option, Javascript doesn't know




which form handling script to invoke. It first initializes a




variable, 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, it




assigns 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 the




object 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 radio




button was selected, and then submits the form to a form




handling script accordingly.









Now, let us take both the functions: check_buttons() and




decide_action() to the next level. There can be varied number of




radio buttons to check. Why just limit to three radio buttons.




The following code not only handles limitless radio buttons, it




also assigns the name of the file accordingly (the value of the




radio button should be the name of the respective action file).



















This next version of the code is much smaller as it gets rid of




multiple if-else statements. Since a particular set of radio




buttons is actually an array, we can loop through the array to




find out which button is checked. Then we can store the value




stored at that index location and return it to the calling




function -- decide_action(). decide_action() this time uses the




value returned, appends the extension ".php", assigns it to the




action attribute and then submits it.









This article has walked you through various concepts, but




mainly, submitting form to different scripts according to




selections made in the form.




Grab this articles

Related articles


Newest Articles

Most Popular Articles