Two submit buttons in one form

Question

I have two submit buttons in a form. How do I determine which one was hit serverside?

Ancier

Answer 1

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

Scrutable

Also make sure the name of the button has correct name! For example "button-1" would NOT work. May save someone lots of hassle so keep this in mind. – Thou

Normally, all inputs in the form are sent with the form. Since a button's value is submitted only if clicked, you'd have to search the form values for these pre-defined names. I think the other answer (https://mcmap.net/q/63556/-two-submit-buttons-in-one-form) that involves giving them all the same name, with different values, makes more sense. Then you just grab the value under a single known form field name. It also makes it more obvious that only one value (the clicked one) will be sent for the given input name, much like how radio buttons work (same name, different values). – Stichter

@Stichter , as Robin Green said in the comments of that answer, this one is better for internationalization. For example, if the page is rendered in Spanish, the text of the buttons will likely be different. So having the logic of your code depend on the text of that button will break in that case. Going by the name is safer, as it is a value that is not displayed to the user and therefore can be treated more as a "private" variable and less as a message to users. – Presbyter

To clarify @sfarbota's comment: The first solution shown in Parrot's answer is problematic, as it relies on testing the user-visible value. That is dubious - code that breaks when changing a user-visible word is considered "fragile". The second solution shown in Parrot's answer is fine - it is the same as this one. Parrot's second solution also shows the corresponding code to write, hence it is a more useful answer than this one. – Caspar

See Leo's answer for the newer HTML5 solution using attribute formaction. Or see kiril's answer for how to have the HTML visible to user be independent of the value sent to browser - solving the internationalization problem. – Caspar

Beware if you're posting the form with the help of javascript FormData: that does not include the submit-button names/values by default. You can add them yourself, though. – Mullis

Answer 2

Solution 1:
Give each input a different value and keep the same name:

<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />

Then in the code check to see which was triggered:

if ($_POST['action'] == 'Update') {
    //action for update here
} else if ($_POST['action'] == 'Delete') {
    //action for delete
} else {
    //invalid action!
}

The problem with that is you tie your logic to the user-visible text within the input.

---

Solution 2:
Give each one a unique name and check the $_POST for the existence of that input:

<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />

And in the code:

if (isset($_POST['update_button'])) {
    //update action
} else if (isset($_POST['delete_button'])) {
    //delete action
} else {
    //no button pressed
}

Patrizio

For i18n purposes it might be better to use the selected answer. – Unctuous

@LaszloPapp as the answer itself says, if you use the selected answer above, you can internationalize the form (i.e. translate into different languages or dialects) without affecting the logic. If you use the first option in this answer, the logic depends on the language the form is actually presented in. – Unctuous

@RobinGreen: I think most people will use the second logic, won't they? – Cowpuncher

i18n = i[nternationalizatio]n, and the 18 stands for the 18 letters between the first and the last. – Chemisette

The OP didn't ask for PHP. – Hebron

@victoroux Just stating "this is way better" is a pretty awful argumentation though, do you remember why you thought this solution would the best in your situation? Because using the displayed value as unique identifier in code is generally not-done, once someone decides the button needs another text or when you need to implement a second language your code will suddenly stop working (otherwise you could even say css-classes are not needed as you could select based on the text of a paragraph/button xD). So to me it seems both greg's and kiril's answer would survive way better in such situation – Armes

@Armes This was answered in '09 and I posted 4 years ago. The reason it still performs better is precisely for the same arguments you made. Back end and front end are separated. If the visual designer chooses to change what the word is as long as the name of the button is left alone the code in the back end will continue to work. Both this version and Greg/Krill's suffer the updating code problem you've outlined, that's inherent to all upgrades in language. Also 463 votes is in stark contrast to 177. This answer is better explained and shows two routes while providing a "superior" alternative. – Chophouse

Do we have some construct in html itself that identify which submit is clicked? Or we need to add onClick handler (will it work?) specically in $('form').ajaxForm({ beforeSend: function () { //here find which sumbit is clicked – Ingress

To solve the issue "In JavaScript/jQuery, how do we get the selected submit button?" (as mentioned by @aandis), I added a return false; on-form-submit and applied the AJAX routine on-button-click. That lets us use $(this).val(); to get the value. – Gusti

@Rudey, nobody did. Yet, here we are. :) – Doukhobor

This should be the accepted answer. Most of the previous ones are too terse. – Ftlb

I've edited this answer to emphasize the major downside of Solution 1. In response to back-and-forth comments on both this and accepted answer, as to which is "better". – Caspar

@Hebron Most generalized backend examples on SO are based on PHP in which the backend isn't specified. – Lederer

how can i do it with react? would you please updated solution. Thank you – Tonyatonye

Answer 3

There’s a new HTML5 approach to this, the formaction attribute:

<button type="submit" formaction="/action_one">First action</button>
<button type="submit" formaction="/action_two">Second action</button>

Apparently this does not work in Internet Explorer 9 and earlier, but for other browsers you should be fine (see: w3schools.com HTML <button> formaction Attribute).

Personally, I generally use JavaScript to submit forms remotely (for faster perceived feedback) with this approach as backup. Between the two, the only people not covered are Internet Explorer before version 9 with JavaScript disabled.

Of course, this may be inappropriate if you’re basically taking the same action server-side regardless of which button was pushed, but often if there are two user-side actions available then they will map to two server-side actions as well.

As noted by Pascal_dher in the comments, this attribute is also available on the <input> tag as well.

Rhearheba

Also available for "input" tag. Accoding to w3schools: when using button tag different browsers may submit different values: w3schools.com/tags/tag_button.asp – Freiburg

Note to Rails users: adding this attribute won't work if your form is created using form_tag. The only way I got it to work is to switch to form_for and use f.submit formaction: 'your_path'. – Oates

formaction on MDN – Caruso

Different form-actions means different url paths. Can be a bit cumbersome if you want to handle the form in a single "view." – Mullis

Answer 4

An even better solution consists of using button tags to submit the form:

<form>
    ...
    <button type="submit" name="action" value="update">Update</button>
    <button type="submit" name="action" value="delete">Delete</button>
</form>

The HTML inside the button (e.g. ..>Update<.. is what is seen by the user; because there is HTML provided, the value is not user-visible; it is only sent to server. This way there is no inconvenience with internationalization and multiple display languages (in the former solution, the label of the button is also the value sent to the server).

Flossieflossy

Apparently browser behaviour differs; some submit the value attribute, others the string between the tags ... So be careful with this one. – Inner

I think the snippet provided is fully supported (w3schools.com/tags/att_button_type.asp) – Flossieflossy

@Flossieflossy the snippet from that link uses two different types of <button>: submit and reset. Note that reset does not submit anything, it just resets the form. So Jeroen's argument remains. – Rafaelita

Ok, your right. Then, I checked the HTML5 W3C Working Draft. Quoting: >>The value attribute gives the element's value for the purposes of form submission. The element's value is the value of the element's value attribute, if there is one, or the empty string otherwise. >>NOTE: A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission. – Flossieflossy

@Jeroen Bull. Which browsers submit the text between the tags? An input or button should only ever submit the 'value' attribute. A button could literally have anything between it tags, including images or other HTML tags. That's the whole point of using a button over an input element, and you're trying to suggest the browser is going to dump all that content as the value? No way. – Stichter

Button is a better choice for multi language sites – Menado

I am trying to use this answer, but when I dump my $_POST, it only shows the other datas in the form, why that? – Isborne

I have implemented the above code, does anyone know how to default to the second button when i hit the Enter key? – Prady

@G.Siganos the default button is the first one that the browser finds IN TREE ORDER, as defined by section 4.10.21.2 of the HTML standard (see html.spec.whatwg.org/multipage/…). If you want the default button to appear in a specific location on the page, then you can of course adjust this with (e.g.) CSS. – Interruption

"better" solution depends on the desired outcome. For example, if one needs to submit to the same URL, but then redirect to different page (Submit and return, Submit and next, Submit and add new), this is not the "better" solution. – Cackle

I like that this needs only one form variable "action" to be tested. Also not affected by the display language. – Programmer

Answer 5

This is extremely easy to test:

<form action="" method="get">
    <input type="submit" name="sb" value="One">
    <input type="submit" name="sb" value="Two">
    <input type="submit" name="sb" value="Three">
</form>

Just put that in an HTML page, click the buttons, and look at the URL.

Restaurant

Using GET here is a somewhat bad practice, one should be using POST when possible. – Rappel

@Rappel That's for testing purposes. – Edytheee

Answer 6

Use the formaction HTML attribute (5th line):

<form action="/action_page.php" method="get">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button type="submit">Submit</button><br>
    <button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>

Robyn

This is similar to Leo's earlier answer. – Caspar

@Caspar - But users have upvoted. take your pick!! – Ralston

Answer 7

<form>
    <input type="submit" value="Submit to a" formaction="/submit/a">
    <input type="submit" value="submit to b" formaction="/submit/b">    
</form>

Fathead

HTML5 feature. Works perfectly on recent web browsers, thanks ! – Blake

NOTE: This appears to be the same as Leo's earlier answer, except that it shows use of input tag rather than button tag. – Caspar

Answer 8

The best way to deal with multiple submit buttons is using a switch case in the server script

<form action="demo_form.php" method="get">

    Choose your favorite subject:

    <button name="subject" type="submit" value="html">HTML</button>
    <button name="subject" type="submit" value="css">CSS</button>
    <button name="subject" type="submit" value="javascript">JavaScript</button>
    <button name="subject" type="submit" value="jquery">jQuery</button>
</form>

Server code/server script - where you are submitting the form:

File demo_form.php

<?php
    switch($_REQUEST['subject']) {

        case 'html': // Action for HTML here
                     break;

        case 'css': // Action for CSS here
                    break;

        case 'javascript': // Action for JavaScript here
                           break;

        case 'jquery': // Action for jQuery here
                       break;
    }
?>

Source: W3Schools.com

Proof

yes it is you must have an idea about action scripts (server side scripting technology) You can use any script/file to process submitted data e.g. php, asp, jsp, etc. <form action="demo_form.php" method="get"> – Proof

Okay. This was confusing because there is also a language named ActionScript. You should say: "server code" or "server script" instead. – Chop

I had no idea you could do that with buttons – Glory

submitting page usually uses method="POST" – Jodhpur

There was an error, it says: : Undefined array key “subject” in C:\xampp\htdocs\Test-1\index.php – Fireside

Answer 9

Maybe the suggested solutions here worked in 2009, but I’ve tested all of this upvoted answers and nobody is working in any browsers.

The only solution I found working was this (but it's a bit ugly to use I think):

<form method="post" name="form">
    <input type="submit" value="dosomething" onclick="javascript: form.action='actionurl1';"/>
    <input type="submit" value="dosomethingelse" onclick="javascript: form.action='actionurl2';"/>
</form>

Swaine

Why not just use formaction="actionurl1"? You don't need JavaScript. – Millesimal

@Millesimal IE9 browser (witch is relatively still used widely) does not support formaction – Payoff

@inaliaghle True, its about 1% of users - it depends for whom the project is aimed at. Approx 1% of users don't use JavaScript. – Millesimal

For future readers: there's nothing wrong with using javascript, as in this answer. Its a useful skill to know. OTOH, the more highly upvoted answers also work fine - ignore the lead sentence of this answer. If for some reason you can't get those other answers to work, then post your complete code as an SO question, explain what happens (or doesn't happen), and ask what you are doing wrong. – Caspar

Answer 10

You formaction for multiple submit buttons in one form example:

 <input type="submit" name="" class="btn action_bg btn-sm loadGif" value="Add Address" title="" formaction="/addAddress"> 
 <input type="submit" name="" class="btn action_bg btn-sm loadGif" value="update Address" title="" formaction="/updateAddress"> 

Kester

This is incomprehensible. E.g., what do you mean by "You formaction"? Is a word missing? Please respond by editing (changing) your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Ftlb

@PeterMortensen "formaction" stands for "form action", and it's an attribute that replaces the default form's action. If you do not declare a "formaction" for a submit button, the form will use its default route. If you do, it will use a specific route. You can read more here: w3schools.com/tags/att_input_formaction.asp – Unbelt

Answer 11

Define name as array.

<form action='' method=POST>
    (...) some input fields (...)
    <input type=submit name=submit[save] value=Save>
    <input type=submit name=submit[delete] value=Delete>
</form>

Example server code (PHP):

if (isset($_POST["submit"])) {
    $sub = $_POST["submit"];

    if (isset($sub["save"])) {
        // Save something;
    } elseif (isset($sub["delete"])) {
        // Delete something
    }
}

elseif very important, because both will be parsed if not.

Athwart

Now this is an excellent suggestion — mostly because you can add more buttons with more cases very easily, and use a switch with a default action if one has added a button and forgotten to add it to the switch (and/or misspelt something etc.) – Eaglet

Also, @Pato added a similar answer which is possibly more idiomatic, but yours works fine! – Eaglet

@GwynethLlewelyn I didn't see the other answer back or did not notice when I wrote my own. It's actually the same, but this simply emphasizes how most people prefer this logic. Difference is just with names for semantic reasons, good understanding for rookies or whoever likes to start with it. – Athwart

Will this pass HTML validation? E.g. without quotes? – Ftlb

Re "Define name as array": Can you elaborate, including links to official documentation about this array thingy/convention/syntax (specific to PHP?)? (But without "Edit:", "Update:", or similar - the answer should appear as if it was written today.) – Ftlb

Why does it matter if both will be parsed? For performance? I think that will be insignificant. – Ftlb

Answer 12

An HTML example to send a different form action on different button clicks:

<form action="/login" method="POST">
    <input type="text" name="username" value="your_username" />
    <input type="password" name="password" value="your_password" />
    <button type="submit">Login</button>
    <button type="submit" formaction="/users" formmethod="POST">Add User</button>
</form>

The same form is being used to add a new user and login user.

Cowled

never thought this was there – Equator

Answer 13

As a note, if you have multiple submit buttons and you hit return (ENTER key), on the keyboard the default button value would be of the first button on the DOM.

Example:

<form>
  <input type="text" name="foo" value="bar">
  <button type="submit" name="operation" value="val-1">Operation #1</button>
  <button type="submit" name="operation" value="val-2">Operation #2</button>
</form>

If you hit ENTER on this form, the following parameters will be sent:

foo=bar&operation=val-1

Zanazander

Thanks. This is exactly what I wanted to confirm. – Klotz

Answer 14

Since you didn't specify what server-side scripting method you're using, I'll give you an example that works for Python, using CherryPy (although it may be useful for other contexts, too):

<button type="submit" name="register">Create a new account</button>
<button type="submit" name="login">Log into your account</button>

Rather than using the value to determine which button was pressed, you can use the name (with the <button> tag instead of <input>). That way, if your buttons happen to have the same text, it won't cause problems. The names of all form items, including buttons, are sent as part of the URL.

In CherryPy, each of those is an argument for a method that does the server-side code. So, if your method just has **kwargs for its parameter list (instead of tediously typing out every single name of each form item) then you can check to see which button was pressed like this:

if "register" in kwargs:
    pass # Do the register code
elif "login" in kwargs:
    pass # Do the login code

Outsell

Answer 15

<form method="post">
    <input type="hidden" name="id" value="'.$id.'" readonly="readonly"/>'; // Any value to post PHP
    <input type='submit' name='update' value='update' formAction='updateCars.php'/>
    <input type='submit' name='delete' value='delete' formAction='sqlDelete.php'/>
</form>

Oliveolivegreen

What is this? PHP? This doesn't look like valid PHP. Is it heredoc? In any case, an explanation would be in order. E.g., what is the idea/gist? Please respond by editing (changing) your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Ftlb

Answer 16

I think you should be able to read the name/value in your GET array. I think that the button that wasn't clicked won't appear in that list.

Internist

You most probably mean the POST array. – Guertin

Not necessarily, if the form's method is "POST" it won't show up in the GET array. Most forms are submitted via POST. – Patrizio

Either/or is technically right, and yet so wrong. You can submit a form with method="GET", but it is cringeworthy. – Linkman

It is only "cringeworthy" when used inappropriately: w3.org/2001/tag/doc/whenToUseGet.html. – Inadvertency

Yeah I wasn't trying to suggest GET, I was just trying to generalize things. – Internist

The default method is GET – Servomotor

You can always use $_REQUEST[]😉 – Eaglet

Answer 17

You can also do it like this (I think it's very convenient if you have N inputs).

<input type="submit" name="row[456]" value="something">
<input type="submit" name="row[123]" value="something">
<input type="submit" name="row[789]" value="something">

A common use case would be using different ids from a database for each button, so you could later know in the server which row was clicked.

In the server side (PHP in this example) you can read "row" as an array to get the id.

$_POST['row'] will be an array with just one element, in the form [ id => value ] (for example: [ '123' => 'something' ]).

So, in order to get the clicked id, you do:

$index = key($_POST['row']);

key

Shrill

This is similar to the answer @Athwart posted, but yours is possibly more idiomatic. Personally I prefer using alphanumeric tags for the index (as opposed to numbers) for readability (easier to remember what each button is supposed to do), but YMMV. But taking advantage of $_POST['row'] being an associative array is clever! – Eaglet

I agree that, if you are dealing with static buttons, you should use named keys. But in some cases you can't. Sometimes you generate those inputs dynamically. The most common case of this would be a list of rows, each one identified by an id. I guess I was thinking about that case when I wrote the answer (4 years ago!). I've edited it so it is more obvious that the number is an id and not an index. – Shrill

Well done! Aye, I agree, it's more obvious now; I still believe that your answer is marginally better than the one by @Athwart (and possibly even a bit more efficient, especially if there are many buttons). – Eaglet

Answer 18

The updated answer is to use the button with formaction and formtarget

In this example, the first button launches a different url /preview in a new tab. The other three use the action specified in the form tag.

<button type='submit' class='large' id='btnpreview' name='btnsubmit' value='Preview' formaction='/preview' formtarget='blank' >Preview</button>
<button type='submit' class='large' id='btnsave' name='btnsubmit' value='Save' >Save</button>
<button type='submit' class='large' id='btnreset' name='btnsubmit' value='Reset' >Reset</button>
<button type='submit' class='large' id='btncancel' name='btnsubmit' value='Cancel' >Cancel</button>

Full documentation is here

Macready

Answer 19

In HTML5, you can use formaction & formmethod attributes in the input field

<form action="/addimage" method="POST">
<button>Add image</button>
<button formaction="/home" formmethod="get">Cancel</button>
<button formaction="/logout" formmethod="post">Logout</button>
</form>

Isometrics

Answer 20

You can also use a href attribute and send a get with the value appended for each button. But the form wouldn't be required then

href="/SubmitForm?action=delete"
href="/SubmitForm?action=save"

Adulterer

This would not work for controllers under POST routes. – Baobaobab

hence, "send a get" – Adulterer

I'm sorry to disagree, but GET is not always suitable. If you "modify the state of your model" then you should never use a GET, as refreshing the browser could yield in transparently sending two times the same request. Use GET only to "view" things and POST to send requests of state changes (add, remove, edit, etc.). then in your POST controller action alter the state (database, sesion...) and cast a redirect-response that then GETs the new altered state. Doing GET for model-state-alteration is very dirty and any good coder should avoid so. Sorry to say that. Clean code rulez. – Baobaobab

True. But playing dirty can sometimes be clean. It depends on what you are doing exactly. Personally it would not map delete and edit requests on a get, but there are ways to make it work.. like checking if it has already been deleted, or checking if the user has permission to do so etc... – Adulterer

Answer 21

Simple. You can change the action of form on different submit buttons click.

Try this in document.Ready:

$(".acceptOffer").click(function () {
    $("form").attr("action", "/Managers/SubdomainTransactions");
});

$(".declineOffer").click(function () {
    $("form").attr("action", "/Sales/SubdomainTransactions");
});

Wystand

Answer 22

You can present the buttons like this:

<input type="submit" name="typeBtn" value="BUY">
<input type="submit" name="typeBtn" value="SELL">

And then in the code you can get the value using:

if request.method == 'POST':
    #valUnits = request.POST.get('unitsInput','')
    #valPrice = request.POST.get('priceInput','')
    valType = request.POST.get('typeBtn','')

(valUnits and valPrice are some other values I extract from the form that I left in for illustration)

Jdavie

What programming language is that? Python? – Ftlb

Answer 23

Since you didn't specify what server-side scripting method you're using, I'll give you an example that works for PHP

<?php
   if(isset($_POST["loginForm"]))
   {
    print_r ($_POST); // FOR Showing POST DATA
   }
   elseif(isset($_POST["registrationForm"]))
   {
    print_r ($_POST);
   }
   elseif(isset($_POST["saveForm"]))
   {
    print_r ($_POST);
   }
   else{

   }
?>
<html>
<head>
</head>
<body>
  
  <fieldset>
    <legend>FORM-1 with 2 buttons</legend>
      <form method="post" >
      <input type="text" name="loginname" value ="ABC" >

     <!--Always use type="password" for password --> 
     <input type="text" name="loginpassword" value ="abc123" >
     
     <input type="submit" name="loginForm" value="Login"><!--SUBMIT Button 1 -->
     <input type="submit" name="saveForm" value="Save">  <!--SUBMIT Button 2 -->
   </form>
  </fieldset>



  <fieldset>
    <legend>FORM-2 with 1 button</legend>
     <form method="post" >
      <input type="text" name="registrationname" value ="XYZ" >
      
     <!--Always use type="password" for password -->
     <input type="text" name="registrationpassword" value ="xyz123" >
     
     <input type="submit" name="registrationForm" value="Register"> <!--SUBMIT Button 3 -->
   </form>
  </fieldset>
  

</body>
</html>

Forms

When click on Login -> loginForm

When click on Save -> saveForm

When click on Register -> registrationForm

Foresee

Why put it in snippets if it doesn't actually run? The syntax highlighting is off. – Ftlb