How to Dispose Multiple Submit Buttons on a Single Form

• Download source - 675 B

Introduction

Sometimes, you could be forced to send same data on a single form to a different URL, or you want to use multiple buttons to handle different requests. Using multiple submit buttons (with same name and same type) on a single form is available. However, how do you check which buttons was pressed on Server and Client? This article shows you how to do it.

Background

On Server, I take VBScript for example. I use Request.Form("bufftonname") through getting different button values to distinguish pressed button.

On Client, no doubt, I use JavaScript. Through value of document.pressed, I can differ which button was pressed.

Sample

At first, my HTML code looks like this:

<form method="post" >
    <input id="Text1" name="Text1" type="text" />
    <br />
    <input name="mybutton" type="submit" value="button1" />
    <input name="mybutton" type="submit" value="button2" />
</form>  

This is a very simple program, only with one form which contains one text input and two submit buttons which have same name--"mybutton", same type--"submit" and different values--"button1" and "button2". when we create a script, these unique values will help us to check which button was pressed.

Now, I add some VBScript to respond to the different button requests.

<% 
          if request.form("mybutton") ="button1" then
              response.Write "Oh, you pressed button 1"
          elseif request.form("mybutton") = "button2" then
              response.Write "Aha, you pressed button 2"
          end if
%> 

Above is just code which I want to display on SERVER. The idea is not complicated, and the code is simple.

Until now, my text input can't work. So I increase some code to check if my input is null, and change my SERVER scripts to display its value only by pressing button1 (this means I hope button2 stays the same).

<% 
      if request.form("mybutton") ="button1" then
          response.Write "Oh, you pressed button 1, 
		now Text1 text show:"&request.Form("Text1")
      elseif request.form("mybutton") = "button2" then
          response.Write "Aha, you pressed button 2"
      end if
%>
<form method="post" onsubmit="return form_check();" >
    <input id="Text1" name="Text1" type="text" />
    <br />
    <input name="mybutton" type="submit" value="button1" />
    <input name="mybutton" type="submit" value="button2" />
</form>
<script type="text/javascript">
      function form_check() {
           if(document.getElementById('Text1').value=="") 
           {
                alert("please enter something"); 
               return false; 
           } 
          return true; 
      }
</script> 

Apparently, the above scripts looks beautiful, but it's fairy lousy. As I mentioned, I hope button2 stay the same, but now if I don't enter Text1 some strings, I will never see "Aha, you pressed button 2". So, I must promote my scripts. Then, document.pressed can come out finally.

Just by making some small changes, I could get what I wanted:

1. Add onclick event on two buttons:
   HTML

   <input name="mybutton" type="submit" value="button1" 
   	onclick="document.pressed=this.value"/>
      <input name="mybutton" type="submit" value="button2" 
      onclick="document.pressed=this.value" /> 

2. Change function form_check():
   JavaScript

   function form_check() {
         if(document.pressed == "button2")
             return true;
         if(document.getElementById('Text1').value=="")
         {
              alert("please enter something");
             return false;
         }
        return true;
    }
   

   At last, I can rest and enjoy the result.

Code

Finally, let's combine all scripts into a single ASP page:

 <% 
      if request.form("mybutton") ="button1" then
          response.Write "Oh, you pressed button 1, 
		now Text1 text show:"&request.Form("Text1")
      elseif request.form("mybutton") = "button2" then
          response.Write "Aha, you pressed button 2"
      end if
%>
<form method="post" onsubmit="return form_check();" >
    <input id="Text1" name="Text1" type="text" />
    <br />
    <input name="mybutton" type="submit" value="button1"  
		onclick="document.pressed=this.value"/>
    <input name="mybutton" type="submit" value="button2" 
		onclick="document.pressed=this.value" />
</form>
<script type="text/javascript">
      function form_check() {
           if(document.pressed == "button2")
               return true;  
           if(document.getElementById('Text1').value=="") 
           {
                alert("please enter something"); 
               return false; 
           }
          return true; 
      }
</script>  

History

• 1^st December, 2010: Initial post