Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

How to Dispose Multiple Submit Buttons on a Single Form

4.00/5 (1 vote)
1 Dec 2010CPOL2 min read 30.2K   174  
This article will introduce how to dispose multiple submit buttons on a single form, especially, display how to check which of those buttons was pressed on Server and Client.

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:

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

VBScript
<% 
          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).

VBScript
<% 
      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:

ASP.NET
 <% 
      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

  • 1st December, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)