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...
Comments