如何为同一个html表单中的不同提交按钮分配不同的操作?

时间:2010-10-22 18:03:35

标签: html perl forms cgi action

我试图根据不同的提交按钮将不同的动作分配给相同的html表单。

我可以这样做吗?

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

3 个答案:

答案 0 :(得分:13)

以防其他人发现此帖:

如果您使用的是HTML5,由于formaction属性,现在可以更轻松了。此属性适用于input的{​​{1}}和button元素,并强制表单提交到所点击元素的type="submit"属性中指定的位置。

然后,此属性的唯一缺点是Internet Explorer 9及更低版本不支持它,但使用一点JavaScript可以轻松克服此限制。

示例:

formaction

对于IE 9及更低版本:

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

答案 1 :(得分:11)

没有。表单只有一个actionactionform的属性,而不是提交按钮。

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

在考虑编写和部署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建议的提交按钮使用不同的名称。在这种情况下,您需要通过浏览传递给脚本的参数的名称来检查按下了哪个提交按钮,恕我直言,这使得调度稍微麻烦。这也意味着某人可以将所有提交按钮的值传递给您的脚本(不是通过用户界面,而是通过curlwget或类似程序。

例如,给定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 { }

答案 2 :(得分:-1)

你也可以使用Ajax,并且每个按钮都分配了一个调用它自己的php脚本的ajax函数,你甚至不需要刷新页面或重定向,就像我试过的这个例子一样:

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