
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || RAM

Search Site:

Home » Javascript » Article

Multiple submit buttons with form validation

Article by:

Paul Eckert (8/30/2005)

	Add to Favourites
	Tell a friend

Summary:

This code shows how to redirect a user to multiple sites, depending on which submit button he presses, but only after the form validates correctly.

Viewed: 50180 times

Rating (68 votes):

3.8 out of 5

Rate this Article

Read Comments

Post Comments

Multiple submit buttons with form validation

This is a very simple example of how to code a form to allow redirection to any of 3 sites depending on which button the user presses, but only after the form validates properly.

In this example, at least one of the checkboxes must be checked before the redirection buttons at the bottom actually send the user to the alternate page or script. If you have text fields or whatever on your form, your validate function will be more complicated. For instance, you might have:

Select All Code


   if(IsEmpty(form.account_number)) {
      alert('You have not entered an account number')
      form.account_number.focus();
      return false;
   }
   if (!IsNumeric(form.account_number.value)) {
      alert('Please enter only numbers or decimal points in the account field')
      form.account_number.focus();
      return false;
      }
   return true;

To make this code snippet work, you must add:
a. 3 real destinations or action routes (identified by action1.html, action2.cgi, and action3.html in my code)
b. 3 button images corresponding to:
submit1_icon.jpg, submit2_icon.jpg, submit3_icon.jpg
in your /images directory.

Then just copy it and paste it into test.html or whatever and browse to it. Voila!

Select All Code

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

var totalboxes;

function setCount(target){

   // 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="/action1.html";
   if (target == 1) document.myform.action="/cgi_bin/action2.html";
   if (target == 2) document.myform.action="/action3.html";       
   if (validate(this,5)) {
      document.myform.submit();
   } else {
      document.myform.action="";
   }
}

function validate(form,count) {
   totalboxes=count;

   for(var i=0 ; i<totalboxes ; i++){
      //return true if any box is checked 
      if (myform.boxes[i].checked) return true;
   }
   //default action : When even one was not checked then..
   alert("Please check at least one checkbox..");
   return false;

}

//-->
</SCRIPT>

</head>
<BODY>


<FORM 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>

<INPUT TYPE="image" onClick="setCount(0)" NAME="Submit1"
   VALUE="delete" SRC="/images/submit1_icon.jpg">
<INPUT TYPE="image" onClick="setCount(1)" NAME="Submit2"
   VALUE="view" SRC="/images/submit2_icon.jpg">
<INPUT TYPE="image" onClick="setCount(2)" NAME="Submit3"
   VALUE="modify" SRC="/images/submit3_icon.jpg">
</FORM>
</BODY>
</html>

Useful Links

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'Multiple submit buttons with form validation'

RELATED ARTICLES
Javascript - Enable and Disable form elements by Jeff Anderson This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form.

Check IsNumeric Function by Jeff Anderson A javascript validation function to check whether the details entered by a user are numeric.

Javascript Onload Event by Jeff Anderson Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy

Form Validation Function by Jeff Anderson A javascript validation function that you can use to validate all types of forms.

Javascript Get Selected Text by Jeff Anderson A cross-browser script to get text selected by the user

JavaScript Field Is Empty Form Validation by Jeff Anderson This javascript function allows you to check whether a form field has been completed or not.

Check Email Validation Function by Jeff Anderson A javascript validation function to check whether the user has entered a valid email address in a form.

Javascript onUnload Event Handler by Jeff Anderson The onUnload Event Handler allows you to perform an action as the user leaves the page.

Multiple submit buttons on a single form by Kiran Pai 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.

Simple date validation by Chris Hogben function that takes a date in three parts, day, month and year - returns true if it's a valid date.

Recent Forum Threads

•	Run a program both on windows and linux
•	VERO.SurfCAM.v2014
•	Schlumberger.Petrel.V2013.2
•	Petrel.V2013.2
•	Altair.HyperWorks.v12
•	VoluMill.v6.1
•	VoluMill.NEXION.6
•	VERO.SurfCAM.v2014
•	Schlumberger.Petrel.V2013.2

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

privacy - contact - advertise - hot links - link to us - submit your article