submit
16 March, 2023
0
0
0
Contributors
About
The submit event is an important event that is triggered when a form is submitted. When a user submits a form by clicking on the submit button or by pressing the Enter key, the browser automatically triggers the submit event for that form. The submit event allows developers to execute custom JavaScript code that can perform additional processing or validation of the form data, or handle the form data in other ways.
The submit event can also be used to cancel the default form submission behaviour, which can be useful for performing custom form validation or for submitting the form data using Ajax instead of the default page refresh behaviour. By calling the preventDefault() method on the event object within the event listener function, you can prevent the default form submission behaviour and perform your own custom processing of the form data.
Event listener
Here's an example of an event listener for the submit event, which is fired when a form is submitted:
HTML
<form>
<label>
Name:
<input type="text" name="name">
</label>
<br>
<label>
Email:
<input type="email" name="email">
</label>
<br>
<button type="submit">Submit</button>
</form>JavaScript
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevent the form from submitting normally
// Get the values of the input fields
const name = form.elements.name.value;
const email = form.elements.email.value;
// Do something with the values, such as sending them to a server
console.log(`Name: ${name}, Email: ${email}`);
});Here, the addEventListener method is called on the form element and listens for the "submit" event. When the event is fired (i.e. the form is submitted), the provided callback function is executed.
The event.preventDefault() method is called at the beginning of the callback function to prevent the form from submitting normally and refreshing the page. Instead, the values of the input fields are retrieved using the form.elements property and used however necessary (in this case, simply logged to the console).
Property
Here's an example of using the onsubmit property
const form = document.querySelector('form');
form.onsubmit = (event) => {
event.preventDefault(); // Prevent the form from submitting normally
// Get the values of the input fields
const name = form.elements.name.value;
const email = form.elements.email.value;
// Do something with the values, such as sending them to a server
console.log(`Name: ${name}, Email: ${email}`);
};Here, the onsubmit property is set on the form element to a function that will be executed when the form is submitted. This function is similar to the callback function passed to the addEventListener method in the previous example, and it also prevents the form from submitting normally using event.preventDefault(). The rest of the code is identical to the previous example, retrieving the values of the input fields and doing something with them.
Inline
Here's an example of using the onsubmit attribute inline:
HTML
<form onsubmit="handleSubmit(event)">
<label>
Name:
<input type="text" name="name">
</label>
<br>
<label>
Email:
<input type="email" name="email">
</label>
<br>
<button type="submit">Submit</button>
</form>JavaScript
function handleSubmit(event) {
event.preventDefault(); // Prevent the form from submitting normally
// Get the values of the input fields
const form = event.target;
const name = form.elements.name.value;
const email = form.elements.email.value;
// Do something with the values, such as sending them to a server
console.log(`Name: ${name}, Email: ${email}`);
}Here, the onsubmit property is set directly on the form element as an attribute, and its value is a string that contains the name of a function to be called when the form is submitted. This function is defined in the JavaScript code as handleSubmit, and it takes the event object as its parameter.
The rest of the code is identical to the previous examples, retrieving the values of the input fields and doing something with them. Note that in the handleSubmit function, event.target is used to get a reference to the form element, which can then be used to access its elements property to retrieve the values of the input fields.
Note that using inline event handlers is generally discouraged, as it can make the HTML code harder to read and maintain. It's better to use the addEventListener() method to attach event listeners in JavaScript code.
Programmatic trigger
There is a submit() method that can be used to trigger a form submission programmatically:
HTML
<form id="my-form">
<label>
Name:
<input type="text" name="name">
</label>
<br>
<label>
Email:
<input type="email" name="email">
</label>
<br>
<button type="submit">Submit</button>
</form>
<button onclick="submitForm()">Submit Form</button>JavaScript
function submitForm() {
const form = document.getElementById('my-form');
form.submit();
}Here, there is a button outside of the form that, when clicked, will trigger the submission of the form. The submitForm function is called when the button is clicked, and it retrieves a reference to the form element using its id attribute. The submit() method is then called on the form element to submit the form.
javascript