Helping ordinary people create extraordinary websites!
HOME TUTORIALS SCRIPTS WEB HOSTING BLOG FORUM
Get Our Newsletter
Email:

9 Javascripts You Better Not Miss!

By Kiran Pai
2005-06-11


Example 3 : Multiple submit buttons on a single form (Submitting same form to any one of many programs)

This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button.

When you press submit on this script it first sets the variable totalboxes = 2, then it also sets the target for the form using the 3 if conditions stated. Then it calls the isReady() function and checks to see if atleast one checkbox has been checked. If even one is checked then it returns true and this causes the contents to be submitted to either program1.jsp or program2.jsp or program3.jsp. If even one checkbox wasn't checked you would be notified with a alert dialog box.

<SCRIPT LANGUAGE = "JavaScript">
<!--

var totalboxes;

function setCount(count, target){
 

totalboxes=count;

// the next 3 lines are the main lines of this script
//remember to leave action field blank when defining the form
if(target == 0) document.myform.action="program1.jsp";
if(target == 1) document.myform.action="program2.jsp";
if(target == 2) document.myform.action="program3.jsp";

}

function isReady(form) {

 for(var x=0 ; x<totalboxes ; x++){

//if even one box is checked then return true
if(myform.boxes[x].checked) return true;
} 
 

//default action : When even one was not checked then..
alert("Please check at least one checkbox..");
return false;

}

//-->
</SCRIPT>

<BODY>

<FORM onSubmit="return isReady(this)" METHOD="post" NAME="myform" ACTION="">
<INPUT TYPE="checkbox" NAME="boxes" VALUE="box1">Box 1 <BR>
<INPUT TYPE="checkbox" NAME="boxes" VALUE="box2">Box 2 <BR>
<INPUT TYPE="checkbox" NAME="boxes" VALUE="box2">Box 3 <BR>
<INPUT TYPE="checkbox" NAME="boxes" VALUE="box2">Box 4 <BR>
<INPUT TYPE="checkbox" NAME="boxes" VALUE="box2">Box 5 <BR>
</FORM>

<INPUT TYPE="image" onClick="setCount(5,0)" NAME="Submit1" VALUE="delete" SRC="delete_icon.jpg">
<INPUT TYPE="image" onClick="setCount(5,1)" NAME="Submit2" VALUE="view" SRC="view_icon.jpg">
<INPUT TYPE="image" onClick="setCount(5,2)" NAME="Submit3" VALUE="modify" SRC="modify_icon.jpg">

</BODY>

The setCount() take 2 parameters, the no of checkboxes and the target program to which the contents have to be submitted to.

Note : Sending the variable 5 for no of boxes using the onClick() event is useful in case you are not knowing the no. of checkboxes while writing the top part of the html page (while writing the script part at the top of the page). This may happen in case you are dynamically creating this html page then you may not know how many checkboxes would be present in the beginning. Basically this thing becomes useful since the dynamic languages such as ASP or JSP would generate the page line by line and at that time you would first generate the script part and then the actual checkboxes on the page. So you would not be able to set the value of totalboxes to a finite number before actually adding all the checkboxes to the page. You could use a counter (within ASP/JSP) which keeps track of the checkboxes you add to the html page and finally set the value of that counter as a parameter to this onClick() function.

You could avoid this by typing the Script at the bottom of the page, but that doesn't work with a few browsers. In case you haven't got the point, its ok.. Just understand how to submit the form to different programs. You can leave the checkbox part...



Tutorial Pages:
» 9 Javascripts you better not miss!
» Example 1 : A Single click for checking-unchecking multiple check boxes
» Example 2 : Opening a page (existing as well as dynamic) in a new window without bars, buttons, etc.
» Example 3 : Multiple submit buttons on a single form (Submitting same form to any one of many programs)
» Example 4 : Emulating Browsers Back-Forward buttons
» Example 5 : Making the Output of a program (servlet/cgi program) to appear in a new frame
» Example 6 : Displaying a Countdown using Javascript
» Example 7 : Changing images with MouseOver and MouseOut events
» Example 8 : Checking the form contents before submitting the form
» Example 9 : Filling the values of a dropdown SelectMenu depending on the selection in another Menu


 | Bookmark
Related Tutorials:
» JavaScript Debugging Techniques with Firebug
» Striped Tables Using JavaScript
» Opening PDFs in a New Window with JavaScript
» Essential Javascript -- A Javascript Tutorial
» Submit Forms Conditionally using JavaScript
» How to Setup a Randomising Function