  |
|
Recomended Resources: Philosophy Partners: Terrascans New Diversity Program Aims to Increase the Bottom Line for Any Organization Submit form conditionally - JavaScript by SiteArticles.comIn 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 <form ... action="scriptname.php">) 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: <form method="post" name="frm1" onSubmit="javascript: decide_action();" action=""> <input type="radio" name="ch" value="one" /> Choice 1<br /> <input type="radio" name="ch" value="two" /> Choice 2<br /> <input type="radio" name="ch" value="three" /> Choice 3<br /> <input type="submit" name="s1" value="Submit" /> </form> 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 <form> 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. <script language="javascript"> function decide_action() { if(check_buttons()==true) { if(document.frm1.ch[0].checked==true) { document.frm1.action="one.php"; } else if(document.frm1.ch[1].checked==true) { document.frm1.action="two.php"; } else { document.frm1.action="three.php"; } document.frm1.submit(); } } function check_buttons() { var ok=false; for(i=0; i<3; i++) { if(document.frm1.ch[i].checked==true) { ok=true; } } if(ok==false) { alert("Select at least one option."); } return ok; } </script> 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). <script language="javascript"> function decide_action() { var file_destination=check_buttons(); if(file_destination!="") { document.frm1.action=file_destination + ".php"; document.frm1.submit(); } } function check_buttons() { var val=""; for(i=0; i 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. About the AuthorWritten by SiteArticles.com. New Customizable JavaScript Menu for Web Applications by Ivan Petrenko
Minsk, Belarus, October 11, 2005 -- Software development company Scand released its new product - dhtmlxMenu v1.0. This JavaScript menu enables web developers to design and edit a simple DHTML menu in a very convenient way. dhtmlxMenu has cross-browser support, so it can be used for sites and web applications that are supposed to run under different OS. The menu is compatible with all main web browsers for Windows, Linux, Unix and Mac OS. This JavaScript menu has XML support that gives possibility to build menus dynamically from XML file or database. Any complex menu structure can be generated using a simple XML code. Menu appearance can be easily changed dynamically without requiring the web page to be reloaded. Powerful client-side API allows changing the menu state "on-the-fly" with external JavaScript code. dhtmlxMenu is highly customizable. This JavaScript component provides an easy way to create pop-up or drop down menus of any configuration. dhtmlxMenu can also be used as a right-click context menu. Skinable design allows web developer to change visual appearance of the menu so it matches different styles, e.g. Windows or Mac OS style. This DHTML menu also has such useful feature as vertical scrolling of items. Above all, the menu has high functional stability and performance. dhtmlxMenu v1.0 is free for non-commercial use (GNU General Public License - GPL) and can be downloaded from JavaScript Menu Homepage. In order to use dhtmlxMenu in commercial projects, there is a possibility to purchase the Commercial license ($49 - 3 months of support period). About Scand LLC About the AuthorIvan Petrenko 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 21| 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 51|52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |