If an HTML Form Has Two <Input Type="Submit"> Buttons, How to Know Which Got Clicked

If an HTML form has two input type= submit buttons, how do I know which got clicked?

Yes, you can rely on this; it's fully documented here. The specific relevant lines say:

When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.

and

If a form contains more than one submit button, only the activated submit button is successful.

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

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>

Multiple Submit buttons, how do determine which one was clicked?

Set value for each submit button and check that in php and find which one is clicked

<form method="POST">
<img src="http://www.foo.com/img.png" id="button_1" name="submit_btn" value="1">
<img src="http://www.foo.com/img.png" id="button_2" name="submit_btn" value="2">
<img src="http://www.foo.com/img.png" id="button_3" name="submit_btn" value="3">
<img src="http://www.foo.com/img.png" id="button_4" name="submit_btn" value="4">
...
<img src="http://www.foo.com/img.png" id="button_100" name="submit_btn" value="100">
</form>

echo $_POST['submit_btn']; will give you the value of which submit button is clicked

Meteor: form with two submit buttons (determine button clicked in event handler)

You could make the event target inputs with type submit:

Template.NewScenarioForm.events({
    "click input[type=submit]": function(e) {
        if ($(e.target).prop("id") == "saveScenarioButton") {
            // Save the scenario
        } else if ($(e.target).prop("id") == "submitScenarioButton") {
            // Submit the scenario
        }
    }
});

You could also make it check the clicked button's value, and drop the ID field

Please note that this will not handle other ways of submitting the form, for example the user pressing Enter in an input field. An approach to handle this as well could be to define a few functions:

function scrapeForm() {
    // Collects data from the form into an object
}

function saveData() {
    var formData = scrapeForm();
    // More logic to save the data
}

function submitData() {
    var formData = scrapeForm();
    // More logic to submit the data
}

Template.NewScenarioForm.events({
    "click input[type=submit]": function(e) {
        if ($(e.target).prop("id") == "saveScenarioButton") {
            saveData();
        } else if ($(e.target).prop("id") == "submitScenarioButton") {
            submitData();
        }
    },
    "submit #NewScenarioForm":
        // Default action on submit.
        // Either save the data
        saveData
        // or submit the data
        submitData
        // or nothing, requiring the user to actually click one of the buttons
        function(e) {e.preventDefault();}
});

How To Determine Which Submit Button Was Pressed, Form onSubmit Event, Without jQuery

Not in the submit event handler itself, no.

But what you can do is add click handlers to each submit which will inform the submit handler as to which was clicked.

Here's a full example (using jQuery for brevity)

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">

  jQuery(function($) {
      var submitActor = null;
      var $form = $('#test');
      var $submitActors = $form.find('input[type=submit]');

      $form.submit(function(event) {
          if (null === submitActor) {
              // If no actor is explicitly clicked, the browser will
              // automatically choose the first in source-order
              // so we do the same here
              submitActor = $submitActors[0];
          }

          console.log(submitActor.name);
          // alert(submitActor.name);

          return false;
      });

      $submitActors.click(function(event) {
          submitActor = this;
      });
  });

  </script>
</head>

<body>

  <form id="test">

    <input type="text" />

    <input type="submit" name="save" value="Save" />
    <input type="submit" name="saveAndAdd" value="Save and add another" />

  </form>

</body>
</html>

How do you handle multiple submit buttons in ASP.NET MVC Framework?

Here is a mostly clean attribute-based solution to the multiple submit button issue based heavily on the post and comments from Maarten Balliauw.

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class MultipleButtonAttribute : ActionNameSelectorAttribute
{
    public string Name { get; set; }
    public string Argument { get; set; }

    public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
    {
        var isValidName = false;
        var keyValue = string.Format("{0}:{1}", Name, Argument);
        var value = controllerContext.Controller.ValueProvider.GetValue(keyValue);

        if (value != null)
        {
            controllerContext.Controller.ControllerContext.RouteData.Values[Name] = Argument;
            isValidName = true;
        }

        return isValidName;
    }
}

razor:

<form action="" method="post">
 <input type="submit" value="Save" name="action:Save" />
 <input type="submit" value="Cancel" name="action:Cancel" />
</form>

and controller:

[HttpPost]
[MultipleButton(Name = "action", Argument = "Save")]
public ActionResult Save(MessageModel mm) { ... }

[HttpPost]
[MultipleButton(Name = "action", Argument = "Cancel")]
public ActionResult Cancel(MessageModel mm) { ... }

Update: Razor pages looks to provide the same functionality out of the box. For new development, it may be preferable.

Send value of submit button when form gets posted

The button names are not submit, so the php $_POST['submit'] value is not set. As in isset($_POST['submit']) evaluates to false.

<html>
<form action="" method="post">
    <input type="hidden" name="action" value="submit" />
    <select name="name">
        <option>John</option>
        <option>Henry</option>
    <select>
<!-- 
make sure all html elements that have an ID are unique and name the buttons submit 
-->
    <input id="tea-submit" type="submit" name="submit" value="Tea">
    <input id="coffee-submit" type="submit" name="submit" value="Coffee">
</form>
</html>

<?php
if (isset($_POST['action'])) {
    echo '<br />The ' . $_POST['submit'] . ' submit button was pressed<br />';
}
?>

Changing button text onclick

If I've understood your question correctly, you want to toggle between 'Open Curtain' and 'Close Curtain' -- changing to the 'open curtain' if it's closed or vice versa. If that's what you need this will work.

function change() // no ';' here
{
    if (this.value=="Close Curtain") this.value = "Open Curtain";
    else this.value = "Close Curtain";
}

Note that you don't need to use document.getElementById("myButton1") inside change as it is called in the context of myButton1 -- what I mean by context you'll come to know later, on reading books about JS.

UPDATE:

I was wrong. Not as I said earlier, this won't refer to the element itself. You can use this:

function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Close Curtain") elem.value = "Open Curtain";
    else elem.value = "Close Curtain";
}