Handling forms in JavaScript
Discover the basics of working with forms in HTML and JavaScript
Forms are an extremely important part of HTML and the Web Platform. They allow users can interact with the page and
- search something on the site
- trigger filters to trim result pages
- send information
and much much more.
By default, forms submit their content to a server-side endpoint, which by default is the page URL itself:
<form>
...
<input type="submit" />
</form>
We can override this behavior by setting the action
attribute of the form element, using the HTML method defined by the method
attribute, which defaults to GET
:
<form action="/contact" method="POST">
...
<input type="submit" />
</form>
Upon clicking the submit input element, the browser makes a POST request to the /contact
URL on the same origin (protocol, domain and port).
Using JavaScript we can intercept this event, submit the form asynchronously (with XHR and Fetch), and we can also react to events happening on individual form elements.
Intercepting a form submit event
I just described the default behavior of forms, without JavaScript.
In order to start working with forms with JavaScript you need to intercept the submit
event on the form element:
const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
// submit event detected
})
Now inside the submit event handler function we call the event.preventDefault()
method to prevent the default behavior and avoid a form submit to reload the page:
const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
// submit event detected
event.preventDefault()
})
At this point clicking the submit event button in the form will not do anything, except giving us the control.
Working with input element events
We have a number of events we can listen for in form elements
input
fired on form elements when the element value is changedchange
fired on form elements when the element value is changed. In the case of textinput
elements andtextarea
, it’s fired only once when the element loses focus (not for every single character typed)cut
fired when the user cuts text from the form elementcopy
fired when the user copies text from the form elementpaste
fired when the user pastes text into the form elementfocus
fired when the form element gains focusblur
fired when the form element loses focus
Here’s a sample form demo on Codepen: https://codepen.io/flaviocopes/pen/zQrqNy/
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025