Vanilla JavaScript get all elements in a form

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

Vanilla JavaScript get a form's elements

So let's say we have a form with all kinds of inputs like this:

<form id="form"> <div class="container"> <div class="row"> <label for="firstname">Firstname</label> <input type="text" name="firstname" id="firstname" /> </div> <div class="row"> <label for="email">Email</label> <input type="email" name="email" id="email" /> </div> <div class="row"> <label for="select">Select</label> <select name="select" id="select"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </div> <div class="row"> <p>Do you agree?</p> <label> <input type="radio" name="agree" value="yes"> Yes </label> <label> <input type="radio" name="agree" value="no"> No </label> </div> <div class="row"> <p>Your favorite animal?</p> <label> <input type="checkbox" name="agree" value="penguin"> 🐧 </label> <label> <input type="checkbox" name="agree" value="dog"> 🐶 </label> </div> </div> </div> </form>

This is a typical form, it has some regular inputs, some select elements, checkboxes, and radio groups.

It also has random markup in between to style your form, see the divs and labels.

So how can we distinguish these elements?

First, let's define a variable that will get our form.

const form = document.getElementById('form');

Now it is literally as simple as calling .elements on this const.

console.log(form.elements);

This will give us an HTMLFormControlsCollection which looks as follows.

As you can see these holds are our form elements, which is already super useful.

You can then loop over them using a forEach loop for instance.

[...form.elements].forEach(item => { console.log(item); });

Now it's up to you to create your own validation with this.

You can find this full demo on the following Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vanilla JavaScript get all elements in a form

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Vanilla JavaScript get a form's elements

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Vanilla JavaScript get a form's elements

Thank you for reading, and let's connect!