How can I assign different actions for different submit buttons in same html form?

Question

I am trying to assign different actions to same html form according to different submit buttons.

Can I do something like this ?

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

Answer 1

You can also use Ajax for this, and every button has assigned an ajax function that calls it's own php script and you don't even need to refresh the page or redirect, like in this example that i have tried:

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

//the first function

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

//take the values from the html input elements you want to use

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

//the script that will process the data

var url="php_script1.php";

//the variable that will contain the information for the php script

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

// Access the onreadystatechange event for the XMLHttpRequest object

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

// Send the data to php_script1.php

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

//the second function

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

}

The php files will have to contain some variables that will store the values sent by dataVar parameter like this:

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

The example I used can be found here: https://www.youtube.com/watch?v=woNQ2MA_0XU.

Answer 2

No. A form has only one action (action being a property of the form, not the submit button).

The target of the action can do different things on the basis of the values in the form. So, you might want to start naming your submit buttons.

Learn HTML before you even think about writing and deploying a CGI script.

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

Note also that choosing an action based on the value of the submit button is a losing strategy if you wish to internationalize the application because the value of a submit button is what the UA displays to humans.

Therefore, script should decide what to do on the basis of some other input element's value.

For example, CGI::Application looks at a run_mode parameter.

Alternatively, you can use different names for your submit buttons as Alec suggests. In that case, you need to check which submit button was pressed by going through the names of the parameters passed to your script which, IMHO, makes the dispatch slightly more cumbersome. It also means it is possible for someone to pass values for all submit buttons to your script (not via the user interface, but via curl or wget or similar programs.

For example, given the 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>

here is how your script may handle form submission:

#!/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

Just in case someone else finds this post:

If you're using HTML5, this is now easier thanks to the formaction attribute. This attribute applies to input and button elements of type="submit" and forces the form to submit to the location specified in the formaction attribute of the clicked element.

Then only drawback of this attribute is that it's not supported by Internet Explorer 9 and lower, but this limitation can be easily overcome using a little JavaScript.

Example:

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

For IE 9 and lower:

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