Click here to Skip to main content
Click here to Skip to main content

How to Dispose Multiple Submit Buttons on a Single Form

, 30 Nov 2010
Rate this:
Please Sign up or sign in to vote.
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:

<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:
    <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():
     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

  • 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)

About the Author

dotcpp
Software Developer
China China
In my first English Lesson, I learned "What's your name?My name is Yubao li",hehe...Here, My name is DotCpp, Which comes from suffix of the c++ file.
 
I am from beautiful city Chongqing China, famous for "Chongqing hilly" and "Chongqing foggy"
 
I am interested in c++ programming, but just as a junior.
 
If you, like me, also come from China, you can visit my Baidu space:
hi.baidu.com/anglecloudy

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 1 Dec 2010
Article Copyright 2010 by dotcpp
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid