Как назначить разные действия для разных кнопок отправки в одной и той же 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/> 

Answer 1

На всякий случай, если кто-то еще найдет этот пост:

Если вы используете HTML5, теперь это стало проще благодаря атрибуту formaction. Этот атрибут применяется к input и button элементам type="submit" и заставляет форму отправляться в местоположение, указанное в атрибуте 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>

Answer 2

Нет. Форма имеет только один action (action является свойством формы , а не кнопкой отправки).

Цель действия может делать разные вещи на основе значений в форме. Итак, вы можете начать называть ваши кнопки отправки.

Изучите HTML, прежде чем даже подумать о написании и развертывании CGI-скрипта.

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

Кроме того, вы можете использовать разные имена для кнопок отправки, как предлагает Алек. В этом случае вам нужно проверить, какая кнопка отправки была нажата, просматривая имена параметров, переданных в ваш скрипт, что, IMHO, делает отправку немного более громоздкой. Это также означает, что кто-то может передать значения для всех кнопок отправки в ваш скрипт (не через пользовательский интерфейс, а через 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 { }

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");

// Доступ к событию onreadystatechange дляобъект XMLHttpRequest

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.