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(
{
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 string
s, 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:
- 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" />
- 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