HTML forms often need to present a choice between two or more operations on the same data. Here is an example:
[x] User 1 [ ] User 2 [x] User 3 [ De-activate selected user(s) ] [ Permanently delete selected user(s) ]
In this article, I will outline few examples to accomplish this. All of the following examples refer to a field called "command" which specifies the operation to perform. Assume that the "verbosity" on the captions is required.
Method 1: Use Multiple Submit Buttons
<input type="submit"> tag uses the value attribute for both the caption and the posted value. You can therefore use two submit buttons to specify the two operations:
<form name="form1" method="post" action=""> <input type="checkbox" name="UserID" value="1"> User 1<br> <input type="checkbox" name="UserID" value="2"> User 2<br> <input type="checkbox" name="UserID" value="3"> User 3<br> <br> <input type="submit" name="command" value="De-active selected user(s)"> <input type="submit" name="command" value="Permanently delete selected user(s)"> </form>
When a form contains more than one submit button with the same "name", the value submitted by the browser is the value of the submit button that was clicked. The server will therefore receive one of the following values for the "command" field:
- De-activate selected user(s)
- Permanently delete selected user(s)
In order to process the form, you can use string matching and hard code the two values in the server side code. The resulting code would be similar to:
<%
select case Request.Form( "command" )
case "De-activate selected user(s)"
' process the command
case "Permanently delete selected user(s)"
' process the command
end select
%>
While this would work, some of you will not find this method very "elegant". You will have to make sure that the captions on the buttons and the strings in the server side code always match. If you are frequently asked to revise the captions, e.g. change "De-activate" to "Deactivate", "Disable" etc, chances are that you will make a mistake eventually. For example, you may forget to match the case of words or mistakenly add additional spaces in the server side code. Some coders also like to see and use generic, shortened names for commands, such as user_disable, user_delete. While perfectly acceptable inside the code, these strings make non-sense captions.
Method 2: Use Multiple Radio Buttons and a Submit Button
You can use radio buttons to specify the two operations. The caption can be displayed separately (preferably using the <label> tag):
<form name="form2" method="post" action=""> <input type="checkbox" name="UserID" value="1"> User 1<br> <input type="checkbox" name="UserID" value="2"> User 2<br> <input type="checkbox" name="UserID" value="3"> User 3<br> <br> <input type="radio" name="command" value="user_disable"> De-activate selected user(s) <input type="radio" name="command" value="user_delete"> Permanently delete selected user(s)<br> <br> <input type="submit" value="Submit"> </form>
The server will receive one of the following values for the "command" field, depending on the radio button that was checked:
- user_disable
- user_delete
The values are easier to code. This method, however, requires the user to click a radio button before clicking the "Submit" button. This method is therefore not very intuitive but useful in some cases.
In order to process the form, you can use a script similar to the above one, with minor changes:
<%
select case Request.Form( "command" )
case "user_disable"
' process the command
case "user_delete"
' process the command
end select
%>
Method 3: Use Multiple Buttons and JavaScript
You can use buttons along with JavaScript as in the following example:
<form name="form3" method="post" action=""> <input type="checkbox" name="UserID" value="1"> User 1<br> <input type="checkbox" name="UserID" value="2"> User 2<br> <input type="checkbox" name="UserID" value="3"> User 3<br> <br> <input type="hidden" name="command" value=""> <input type="button" onclick="document.form3.command.value = 'user_disable'; document.form3.submit( );" value="De-active selected user(s)"> <input type="button" onclick="document.form3.command.value = 'user_delete'; document.form3.submit( );" value="Permanently delete selected user(s)"> </form>
The buttons created with <input type="button"> are usually used as triggers for client-side scripts. Here, we use two such buttons to modify the value of the "command" field (hidden intentionally) and submit the form. This is done by embedding JavaScript code in the "onclick" event of the buttons. The server will receive one of the following values for the "command" field:
- user_disable
- user_delete
This method, however, requires a JavaScript capable browser having JavaScript enabled. If this is not the case then the buttons simply will not work.
In order to process the form, you can the script similar to the above one:
<%
select case Request.Form( "command" )
case "user_disable"
' process the command
case "user_delete"
' process the command
end select
%>
Method 4: Use Multiple Submit Buttons and CSS
As described in method 1, <input type="submit"> tag uses the value attribute for both the caption and the posted value. You can therefore use two submit buttons to specify the two operations. This variation of the example uses captions that make more sense to the server side code but not to the user:
<form name="form4" method="post" action=""> <input type="checkbox" name="UserID" value="1"> User 1<br> <input type="checkbox" name="UserID" value="2"> User 2<br> <input type="checkbox" name="UserID" value="3"> User 3<br> <br> <input type="submit" name="command" value="user_disable" class="submit-button button-disable"> <input type="submit" name="command" value="user_delete" class="submit-button button-delete"> </form>
The server will therefore receive one of the following values for the "command" field, depending on which button was clicked to submit the form:
- user_disable
- user_delete
It is perfect except for the captions. We can add a little CSS to hide the captions and spice things up a little:
<style type="text/css">
.submit-button {
margin: 0;
border: 0;
padding: 0;
width: 20px;
height: 20px;
text-indent: -1000px; /* important part -- the css text-indent property
this rule attempts to push the caption outside
the button, effectively hiding it */
background-color: #CCCCCC;
background-position: center center;
background-repeat: no-repeat;
}
.button-disable {
background-image: url(icon-disable.png);
}
.button-delete {
background-image: url(icon-delete.png);
}
</style>
And the result is:
Variations of Method 4
The above mentioned example is suitable for use inside data grids. Following example shows a data grid that contains multiple rows of data, each with a delete button containing the ID of the record:
<form name="form5" method="post" action="">
<input type="hidden" name="command" value="user_delete">
<table>
<tr>
<td>User 1</td>
<td>... data ...</td>
<td><input type="submit" name="UserID" value="1" class="submit-button button-delete"></td>
</tr>
<tr>
<td>User 2</td>
<td>... data ...</td>
<td><input type="submit" name="UserID" value="2" class="submit-button button-delete"></td>
</tr>
<tr>
<td>User 3</td>
<td>... data ...</td>
<td><input type="submit" name="UserID" value="3" class="submit-button button-delete"></td>
</tr>
</table>
</form>
And the result is:
