如何处理单个表单中的多个提交按钮

• 下载源代码 - 675 B

引言

有时，你可能需要将相同的数据通过单个表单发送到不同的 URL，或者你想使用多个按钮来处理不同的请求。在单个表单上使用多个提交按钮（具有相同的名称和相同的类型）是可行的。但是，如何检查在服务器和客户端按下了哪个按钮呢？本文将向你展示如何做到这一点。

背景

在服务器端，我以 VBScript 为例。我使用 Request.Form("bufftonname") 通过获取不同的按钮值来区分按下的按钮。

在客户端，毫无疑问，我使用 JavaScript。通过 document.pressed 的值，我可以区分按下了哪个按钮。

示例

首先，我的 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>  

这是一个非常简单的程序，只有一个表单，其中包含一个文本输入框和两个具有相同名称--"mybutton"，相同类型--"submit" 和不同值--"button1" 和 "button2" 的提交按钮。当我们创建一个脚本时，这些唯一的值将帮助我们检查按下了哪个按钮。

现在，我添加一些 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
%> 

以上只是我想要在服务器端显示的代码。这个想法并不复杂，代码也很简单。

到目前为止，我的文本输入框无法工作。所以我增加了一些代码来检查我的输入是否为 null，并将我的服务器端脚本更改为**仅通过按下 button1 来显示其值**（这意味着我希望 button2 保持不变）。

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

显然，上面的脚本看起来很漂亮，但实际上很糟糕。正如我提到的，我希望 button2 保持不变，但现在如果我在 Text1 中不输入任何 string，我就永远看不到“啊哈，你按下了按钮 2”。所以，我必须改进我的脚本。然后，document.pressed 最终可以出现。

只需进行一些小的更改，我就可以得到我想要的结果

1. 在两个按钮上添加 onclick 事件

   <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. 更改函数 form_check()

    function form_check() {
          if(document.pressed == "button2")
              return true;  
          if(document.getElementById('Text1').value=="") 
          {
               alert("please enter something"); 
              return false; 
          }
         return true; 
     } 

   最后，我可以休息并享受结果了。

代码

最后，让我们将所有脚本组合到一个 ASP 页面中

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

历史

• 2010 年 12 月 1 日：初始发布