How to Use Two Submit Buttons, and Differentiate Between Which One Was Used to Submit the Form

Two submit buttons in one form

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

How do I use two submit buttons, and differentiate between which one was used to submit the form?

Give each input a name attribute. Only the clicked input's name attribute will be sent to the server.

<input type="submit" name="publish" value="Publish">
<input type="submit" name="save" value="Save">

And then

<?php
    if (isset($_POST['publish'])) {
        # Publish-button was clicked
    }
    elseif (isset($_POST['save'])) {
        # Save-button was clicked
    }
?>

Edit: Changed value attributes to alt. Not sure this is the best approach for image buttons though, any particular reason you don't want to use input[type=image]?

Edit: Since this keeps getting upvotes I went ahead and changed the weird alt/value code to real submit inputs. I believe the original question asked for some sort of image buttons but there are so much better ways to achieve that nowadays instead of using input[type=image].

Differentiate between two submit buttons in a form using javascript

You are on the right track, but your form is submitted always because you are not canceling the events (or, in DOM Level 2+ parlance, you are not “preventing the default action for the event”).

function submitForm (button)
{
  if (button.value == "Find")
  {
    /* open popup */
    find();
  }
  else if (button.value == "Add")
  {
    /* stay in the same window */
  } 

  return false;
}

<form action="/findNames">
  <input type="submit" value="Add" onclick="return submitForm(this)"/>
  <input type="submit" value="Find" onclick="return submitForm(this)"/>
</form>

(You should never name a form-related variable submit because if you are not careful that overrides the form object's submit method.)

The return value false, when returned to the event handler, prevents the default action for the click event. This means the user agent works as if the submit button was never activated in the first place, and the form is not submitted.

Another approach to solve this is to save a value identifying the clicked submit button in a variable or property, and check that value in the submit event listener. This works because the click event of the input (submit button) by definition happens before the submit event of the form:

var submitName;

function submitForm (form)
{
  if (submitName == "Find")
  {
    /* open popup */
    find();
  }
  else if (submitName == "Add")
  {
    /* stay in the same window */
  } 

  return false;
}

function setSubmit (button)
{
  submitName = button.value;
}

<form action="/findNames" onsubmit="return submitForm(this)">
  <input type="submit" value="Add" onclick="setSubmit(this)"/>
  <input type="submit" value="Find" onclick="setSubmit(this)"/>
</form>

(This is just an example. Try to minimize the number of global variables.)

Again, the return value false, when returned to the submit event handler, prevents the form from being submitted. You may want to return true instead if you explicitly want the form to be submitted after you handled the submit event. For example, you may want to validate the form and if validation was successful, display the server response in another frame, through the target attribute.

The advantage of event-handler attributes over adding event listeners in script code is that it is runtime-efficient, backwards-compatible, and still standards-compliant. The disadvantage is that you may have to duplicate event-handler code if the event does not bubble. (Not an issue here.)

Other people may say that a disadvantage of event-handler attributes is also that there is no separation between markup and function; however, you should make up your own mind about that. In my opinion, function is always tied to specific markup, and the jumping through hoops for working around different DOM implementations is seldom worth it.

See also: DOM Client Object Cross-Reference: DOM Events

The most important thing here is that, regardless of all client-side improvements that you make, the form stays accessible, i. e. that it still works with the keyboard even without client-side scripting. Your server-side script (here: /findNames) can work as fallback, then, and the client-side script can avoid unnecessary roundtrips, improving the user experience and reducing the network and server load.

Angular Two buttons to submit a form but with different purpose

I found an answer. A bit tricky:
In the onSubmit event I check:

var buttonName = document.activeElement.getAttribute("Name");

Since one of the button must be the active element on the form when the user click it, this does the trick for me

One form with two submit buttons and different actions for each button

Refer this :

Multiple submit buttons php different actions

Put this script in your page :

<script>
    function submitForm(action)
    {
        document.getElementById('columnarForm').action = action;
        document.getElementById('columnarForm').submit();
    }
</script>

Modify your input code :

<input type="image" name="camper" onclick="submitForm('formindb_hoh_1.php')" value="camper" src="../images/apps/camperBtn.png" class="submit_button" />
<input type="image" name="medical" onclick="submitForm('formindb_hoh_2.php')" value="medical" src="../images/apps/medicalBtn.png"class="submit_button" />

use many submit buttons in the same form

It won't work the way you've written it. Only the submit button you send will be included in request.form, you'll get an error if you try to use the name of one of the other buttons.

Also, request.form.get is a function, not a dictionary. You can use request.form.get("Histogram") -- this will return the value of the Histogram button if it was used, otherwise it will return None.

Instead of giving the buttons different names, use the same name but different values.

<form id="package_form" action="" method="post">
      <div class="panel-body">
          <input type ="submit" name="action" value="Download">
      </div>
      <div class="panel-body">
          <input type ="submit" name="action" value="Histogram">
      </div>
      <div class="panel-body">
          <input type ="submit" name="action" value="Search">
      </div>

 </form>

Then your Python code can be:

if request.form['action'] == 'Download':
    ...
elif request.form['action'] == 'Histogram':
    ...
elif request.form['action'] == 'Search':
    ...
else:
    ... // Report bad parameter

Multiple submit buttons in an HTML form

I'm just doing the trick of floating the buttons to the right.

This way the Prev button is left of the Next button, but the Next comes first in the HTML structure:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

---

Related Topics