(page requirements)

Creating and handling a form with multiple submit buttons with images

Wondering how to create an HTML form with more than a single submit button with images and check which of those buttons was clicked?
 
First, let's take a look at the HTML code required to make a form with multiple "submit" image buttons. Note how each of the "image" type input buttons have unique names. We will be using these names to find out which of the buttons was pressed. The SRC attribute should point to unique image files, although technically you could use the same image file for all three of those input buttons. We're assuming that the script we're calling to handle the form submission (or the ACTION attribute) is "mulibtn.asp" which we will demonstrate next. You can find a website for sale to implement these tips.
 
<HTML><BODY>

<FORM action="mulibtn.asp" method="post">
First name: <INPUT type="TEXT" name="FNAME"><BR>
<INPUT type="image" src="btn1.gif" name="bsubmit1">
<INPUT type="image" src="btn2.gif" name="bsubmit2">
<INPUT type="image" src="btn3.gif" name="bsubmit3">
</FORM>

</BODY></HTML>
Listing #1 : HTML code. Download mulibtn.htm (0.3 KB).
 
Following is a sample Active Server Pages (ASP) script that you can use in conjunction with the above form. When an image button is clicked, the script will receive the position of the mouse pointer as X, Y coordinates relative to the clicked image. For example, the coordinates of the button "bsubmit1" will be sent to the script as "bsubmit1.x" and "bsubmit1.y" If a button other than "bsubmit1" was clicked, the coordinates for "bsubmit1" will contain an empty value (Nil, Empty, NULL or "" value depending on the scripting language you're using). In our ASP sample which is using VBScript, we'll check for the "nil" value.
 
<HTML><BODY>

<%
  btnID = "?"

  if Request.Form("bsubmit1.x") <> nil then
    btnID = "1"
  elseif Request.Form("bsubmit2.x") <> nil then
    btnID = "2"
  elseif Request.Form("bsubmit3.x") <> nil then
    btnID = "3"
  end if
%>
Submit button ID: <%=btnID%><BR>

</BODY></HTML>
Listing #2 : ASP/VBScript code. Download mulibtn0.asp (0.29 KB).
 
Finally we'll combine the HTML code and the ASP script code into a single file as follows:
 
<HTML><BODY>

<%
  btnID = "?"

  if Request.Form("bsubmit1.x") <> nil then
    btnID = "1"
  elseif Request.Form("bsubmit2.x") <> nil then
    btnID = "2"
  elseif Request.Form("bsubmit3.x") <> nil then
    btnID = "3"
  end if
%>
Submit button ID: <%=btnID%><BR>

<FORM action="mulibtn.asp" method="post">
First name: <INPUT type="TEXT" name="FNAME"><BR>
<INPUT type="image" src="btn1.gif" name="bsubmit1">
<INPUT type="image" src="btn2.gif" name="bsubmit2">
<INPUT type="image" src="btn3.gif" name="bsubmit3">
</FORM>

</BODY></HTML>
Listing #3 : ASP/VBScript code. Download mulibtn.asp (0.39 KB).
 
 
Applicable Keywords : Active Server Pages, HTML, HTML 3.2, HTML 4.0, Internet Explorer, Explorer 2.x, Explorer 3.x, Explorer 4.x, Explorer 5.x, Internet, Netscape Navigator, Navigator 2.x, Navigator 3.x, Communicator 4.x, Netscape 6.x, World Wide Web
 
 
 
Copyright © 2009 Chami.com. All Rights Reserved. | Advertise | Created in HTML Kit editor