form-control

A cross-browser helper function to retrieve a form control by name.

Usage

<form id="my-form">
    <fieldset name="user">
        <legend>User Information</legend>

        <input type="text" name="username">
        <input type="password" name="password">
    </fieldset>

    <input type="checkbox" name="accept">
</form>

var element = require('form-element');
var form = document.querySelector('#my-form');

element(form, 'username');
// => <input type="text" name="username">

element(form, 'accept');
// => <input type="checkbox" name="accept">

element(form, 'does-not-exist');
// => null ... this element does not exist at all


// restrict search to a specific fieldset

var fieldset = element(form, 'user');

element(fieldset, 'accept');
// => null ... this element is not part of the <fieldset>

API

element(root, name)

Use this API to find a form control via it's name in the given root element.

When searching a <form> or a <fieldset> as the root, this is a wrapper for root.elements.namedItem().

Otherwise, this will use root.querySelectorAll() to find elements with the corresponding name. This method is primarilly intended as a fallback, you should strongly consider using a <form> or <fieldset> as a first-resort.

If no element(s) are found with the given name, this function will return null.

PROTIP: just about any element with a name attribute can be found using this mechanism, so give your <fieldset>s names, and then use the API to search just within that specific <fieldset>.