Subscribe

Vanilla JavaScript get form element's form

✍️

Most efficient way to get a elements parent form in JavaScript

24 Dec, 2020 · 2 min read

Wow, weird title, but we want to get a form in which a specific element is sitting.

We could use closest() or parent(), but for form elements we can even make it simpler!

We can use the .form on these elements.

To demonstrate, I’m going to showcase two fairly common use cases.

1. You know the input based on its ID

A common use case is that we know the input ID and want to get its form.

Let’s say this is our HTML structure.

<form>
  <input id="myInput" type="text" />
  <select onchange="findForm(this)">
    <option value="1">Change me</option>
    <option value="2">To anything</option>
  </select>
</form>

Now, if we want to get the form element the #myInput belongs to, we can do this:

const input = document.getElementById('myInput');
let form = input.form;
console.log(form);

This return the following:

Vanilla JavaScript get form

2. Input changed, get the form element

On the other side, you might find you need the form based on an element changing.

So in the case of our select, each time it changes, we want to get the form it belongs to.

findForm = (el) => {
  let elForm = el.form;
  console.log(elForm);
};

Simple as that!

Find this full demo on this Codepen.

See the Pen Vanilla JavaScript get form element's form by Chris Bongers (@rebelchris) on CodePen.

You might ask when you need this.

If the fields change, you want to validate the whole form. Or you need to do a lookup for another field to make sure those match.

A lot of options come to mind.

I hope you find this a useful method of finding an element’s form.

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Removing all vowels with JavaScript

3 Dec, 2022 · 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 · 3 min read

10 games to learn JavaScript

Join 2099 devs and subscribe to my newsletter