How Is the Default Submit Button on an HTML Form Determined

How is the default submit button on an HTML form determined?

If you submit the form via JavaScript (i.e., formElement.submit() or anything equivalent), then none of the submit buttons are considered successful and none of their values are included in the submitted data. (Note that if you submit the form by using submitElement.click() then the submit that you had a reference to is considered active; this doesn't really fall under the remit of your question since here the submit button is unambiguous but I thought I'd include it for people who read the first part and wonder how to make a submit button successful via JavaScript form submission. Of course, the form's onsubmit handlers will still fire this way whereas they wouldn't via form.submit() so that's another kettle of fish...)

If the form is submitted by hitting Enter while in a non-textarea field, then it's actually down to the user agent to decide what it wants here. The specifications don't say anything about submitting a form using the Enter key while in a text entry field (if you tab to a button and activate it using space or whatever, then there's no problem as that specific submit button is unambiguously used). All it says is that a form must be submitted when a submit button is activated. It's not even a requirement that hitting Enter in e.g. a text input will submit the form.

I believe that Internet Explorer chooses the submit button that appears first in the source; I have a feeling that Firefox and Opera choose the button with the lowest tabindex, falling back to the first defined if nothing else is defined. There's also some complications regarding whether the submits have a non-default value attribute IIRC.

The point to take away is that there is no defined standard for what happens here and it's entirely at the whim of the browser - so as far as possible in whatever you're doing, try to avoid relying on any particular behaviour. If you really must know, you can probably find out the behaviour of the various browser versions, but when I investigated this a while back there were some quite convoluted conditions (which of course are subject to change with new browser versions) and I'd advise you to avoid it if possible!

What is the default behavior of the 'return' key in an HTML form?

Both button elements have no type set. Type=submit "is the default if the attribute is not specified for buttons associated with a <form>" (MDN Webdocs)
and troublesome is the next after the input field. If you change its type to 'button', 'submit' will submit.

From MDN as well: "Note that the submit event fires on the element itself, and not on any or inside it. However, the SubmitEvent which is sent to indicate the form's submit action has been triggered, includes a submitter property, which is the button that was invoked to trigger the submit request. If the submission was not triggered by a button of some kind, the value of submitter is null. (If there's no element type=submit and Enter is pressed inside the input, the form will submit with event.submitter = null)

The logic seems to be "find the closest button to the focus that has type="submit", and simulate a click event on that button, else fall back to just submitting the form" (didn't find this explicitly somewhere)
In your example 'troublesome' is of type 'submit' and closest to the input, and if there wasn't the 'prevent.default()', both events (click & submit) would be triggered.

document.querySelector('form').onsubmit = ev => {
  ev.preventDefault();
  document.querySelector('#result').innerText
    = ev.target.elements.text.value;
};

document.querySelector('#troublesome').onclick = 
  ev => {
    ev.preventDefault();
    ev.target.innerText = Math.random();
  };

<form>
  <input type="text" name='text' value='something' />
  <button type="button" id="troublesome">Trouble</button>
  <button>Submit</button>
</form>

<div id="result">not submitted</div>

Multiple submit buttons on HTML form – designate one button as default

My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

with:

#buttons { overflow: hidden; }
#buttons input { float: right; }

will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.

This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.

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>

What does the submit button do, and how do you make a signup for newsletter with it?

Typically the page contains a series of input elements ( think text boxes etc) which the user puts their data in to, the submit button POSTs a form to the server, the server can then access those form values and use them as required.

So in your scenario the server received an email address and name, for example, and you have an email library which can send that information to you. Alternatively of course you might put that information in a database so you can more easily handle subscriptions.

What happens when submit button is clicked

The form will be submitted to the server and the browser will redirect away to the current address of the browser and append as query string parameters the values of the input fields.

In terms of the HTTP protocol the following GET request HTTP request will be sent:

GET http://example.com/?namefield1=value1&namefield2=value2 HTTP/1.1
Host: example.com

Since your <form> is missing an action attribute, the browser will simply redirect to the current url by appending the values as query string parameters. So if this form was loaded from http://example.com/foo.php after submitting it, the browser will redirect to http://example.com/foo.php?namefield1=value1&namefield2=value2 where value1 and value2 will be the values enetered by the user in the corresponding input fields.

Also you might use your browser's built in debugging tools or Fiddler to inspect the exact payload that gets sent to the server.

Is there an option for 2 seconds after hitting the submit button display an alert and then complete the form request?

Add an event listener for the submit event that prevents the form from submitting by calling Event.preventDefault(), then use setTimeout to execute a function which alerts and submits the form programmatically after 2000 milliseconds:

myForm.addEventListener('submit', function(e) {
  setTimeout(function() {
    alert("The form has been submited!")
    myForm.submit();
  }, 2000)
  e.preventDefault()
})

<form id="myForm" method="POST" novalidate="">
  <input type="text" id="NameInput" name="NameInput">
  <button type="submit">Complete</button>
</form>

How Is the Default Submit Button on an HTML Form Determined