Lesson guide

Learning objectives

  • Explain the main purpose of Forms: event and method submit in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in Forms, controls.

Real-world context

This lesson matters when you need to recognize where Forms: event and method submit fits into real JavaScript programs. The event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.

Key ideas

  • Forms: event and method submit is part of the Forms, controls chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Forms: event and method submit
  • Forms
  • event
  • method
  • submit

The submit event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.

The method form.submit() allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.

Let’s see more details of them.

Event: submit

There are two main ways to submit a form:

  1. The first – to click <input type="submit"> or <input type="image">.
  2. The second – press Enter on an input field.

Both actions lead to submit event on the form. The handler can check the data, and if there are errors, show them and call event.preventDefault(), then the form won’t be sent to the server.

In the form below:

  1. Go into the text field and press Enter.
  2. Click <input type="submit">.

Both actions show alert and the form is not sent anywhere due to return false:

markup
<form onsubmit="alert('submit!');return false">
  First: Enter in the input field <input type="text" value="text"><br>
  Second: Click "submit": <input type="submit" value="Submit">
</form>

First: Enter in the input field

Second: Click "submit":

Relation between submit and click

When a form is sent using Enter on an input field, a click event triggers on the <input type="submit">.

That’s rather funny, because there was no click at all.

Here’s the demo:

markup
<form onsubmit="return false">
 <input type="text" size="30" value="Focus here and press enter">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

Method: submit

To submit a form to the server manually, we can call form.submit().

Then the submit event is not generated. It is assumed that if the programmer calls form.submit(), then the script already did all related processing.

Sometimes that’s used to manually create and send a form, like this:

javascript
let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

document.body.append(form);

form.submit();

Common mistakes

  • Skipping the small examples and then missing the exact rule that Forms: event and method submit depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

  • Forms: event and method submit gives you one more piece of the JavaScript mental model.
  • The examples in this lesson are the quickest way to check whether the rule is clear.
  • Revisit the key terms when you meet the same idea in later chapters.

Predict

Before running this submit check, predict the seven output lines. It models submit by Enter, submit by button click, cancellation with preventDefault, and the fact that form.submit() bypasses the submit event.

javascript
Reveal explanation

The output is click:submit button, submit:event, sent:false, submit:event, sent:false, method:POST:/search?q=test, and submitEventFired:false. Pressing Enter in a text input submits the form and may trigger a click on the submit button, even though the user did not physically click it. Both Enter and an actual submit button route through the submit event, where validation can call preventDefault() to stop sending. Calling form.submit() from code sends the form directly and does not fire a submit event, so the script is responsible for doing validation first.

Try it

Remove event.preventDefault() from the submit handler, then predict both sent: lines.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Forms: event and method submit in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Page: DOMContentLoaded, load, beforeunload, unload when you are ready for the next lesson.