如何在同一个HTML表单中为不同的提交按钮分配不同的操作？

Question

我正在尝试根据不同的提交按钮为同一个HTML表单分配不同的操作。

我能像这样做吗？

<FORM>
------
<INPUT type="submit" value="DoSomething" action="DoSomething.pl" method="POST">
<INPUT type="submit" value="DoSomethingElse" action="DoSomethingElse.pl" method="POST">
<FORM/> 

- Jean

Answer 1

如果你正在使用HTML5，通过formaction属性，现在这变得更加容易了。此属性适用于type="submit"的input和button元素，并强制表单提交到所单击元素的formaction属性中指定的位置。

该属性唯一的缺点是它不受Internet Explorer 9及以下版本的支持，但可以使用一点JavaScript轻松地克服这个限制。

示例：

<form method="post" action="go_default">
    <input type="submit" value="Go Left" formaction="go_left" />
    <input type="submit" value="Go Right" formaction="go_right" />
</form>

对于IE 9及以下版本：

<script type="text/javascript">
   $(function () {
      var $submit = $('form [type="submit"][formaction]');

      $submit.click(function() {
          var $this  = $(this),
              action = $this.prop('formaction'),
              $form  = $this.closest('form');

          $form.prop('action', action).submit();
      });
   });
</script>

- Meryovi

Answer 2

不行。一个表单只有一个action（action是表单的属性，而不是提交按钮的属性）。

操作的目标可以根据表单中的值执行不同的操作。因此，您可能希望开始为提交按钮命名。

在考虑编写和部署CGI脚本之前，请先学习HTML。

<form method="POST" action="/cgi-bin/script">
<input type="submit" name="action" value="DoSomething">
<input type="submit" name="action" value="DoSomethingElse">
</form>

请注意，基于提交按钮的值选择操作是一种失败的策略，如果您希望国际化应用程序，因为提交按钮的value是UA显示给人类的内容。

因此，script应该根据其他输入元素的值来决定要做什么。

例如，CGI::Application查看run_mode参数。

或者，您可以像Alec建议的那样使用不同的名称来命名提交按钮。在这种情况下，您需要通过检查传递给脚本的参数的名称来确定按下了哪个提交按钮，这使得调度稍微麻烦一些。这也意味着有人可以通过curl或wget或类似的程序将所有提交按钮的值传递给您的脚本（而不是通过用户界面）。

例如，给定HTML：

<form method="POST" action="/cgi-bin/script">
<input type="submit" name="submit_left" value="Go Left">
<input type="submit" name="submit_right" value="Go Right">
</form>

以下是您的脚本如何处理表单提交的方式：

#!/usr/bin/perl

use strict; use warnings;

use CGI::Simple;

my $cgi = CGI::Simple->new;

my %dispatch = (
    left  => \&handle_left,
    right => \&handle_right,
);

my @actions = grep s/^action_(right|left)\z/$1/, $cgi->param;

my $handler = \&handle_invalid_action;

if ( @actions == 1) {
    my ($action) = @actions;
    if ( exists $dispatch{ $action } ) {
        $handler = $dispatch{ $action };
    }
}
else {
    $handler = \&handle_too_many_actions;
}

$handler->($cgi);

sub handle_left { }
sub handle_right { }
sub handle_invalid_action { }

# because it may indicate someone trying to abuse your script
sub handle_too_many_actions { }

- Sinan Ünür

---

在上面的示例代码中，两个提交按钮是多余的。它们都将执行相同的操作。正确吗？ - Jean

@alertjean，这取决于脚本。提交按钮具有不同的值，因此脚本可以确定点击了哪个按钮，并根据此执行不同的操作。 - cjm

通常使用name属性来区分不同的操作更容易。例如，<input type="submit" name="action_left" value="Go left!" />和<input type="submit" name="action_right" value="Go right!" />。这样你就可以匹配简化的操作名称而不是实际文本。当你在处理多语言站点时，这也是唯一的方法，因为值永远不会相同。 - Alec

Answer 3

你也可以使用Ajax来实现这个功能。每个按钮都有一个对应的ajax函数，调用它自己的php脚本，而且你不需要刷新页面或者重定向，就像我尝试的这个例子一样：

HTML:
<input type="submit" value="Make other thing" onclick="ajax_post1();"/>
<input type="submit" value="Make something" onclick="ajax_post2();"/>

<div id="script1Response"></div>
<div id="script2Response"></div>

Javascript 函数：

//第一个函数

function ajax_post1(){
var hr = new XMLHttpRequest();

//从你想要使用的 HTML 输入元素中获取值

var v1=document.getElementbyId("element1").value;
var v2=document.getElementbyId("element2").value;

//将处理数据的脚本

var url="php_script1.php";

//将包含 PHP 脚本信息的变量

var dataVar="var1="+v1+"&var2="+v2;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// 访问XMLHttpRequest对象的onreadystatechange事件

hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
    var script_response = hr.responseText;
    document.getElementById("script1Response").innerHTML = script_response;
    }
   }

// 将数据发送到php_script1.php

hr.send(dataVar); // Actually execute the request
document.getElementById("script1Response").innerHTML = "processing...";
}

//第二个函数

function ajax_post2(){

var v1=document.getElementbyId("element1").value;
var v2=document.getElementbyId("element2").value;
var url="php_script2.php";
var dataVar="var1="+v1+"&var2="+v2;
var hr = new XMLHttpRequest();
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
    var script_response = hr.responseText;
    document.getElementById("script2Response").innerHTML = script_response;
    }
   }

hr.send(dataVar); 
document.getElementById("script2Response").innerHTML = "processing...";

}

PHP文件将需要包含一些变量，这些变量将存储由dataVar参数发送的值，如下所示：

$var1_=$_POST['var1']; //the var1 from the dataVar parameter
$var2_=$_POST['var2']; //the var2 from the dataVar parameter

我使用的示例可以在这里找到： https://www.youtube.com/watch?v=woNQ2MA_0XU。

- the_butterfly_effect