Determine if an element is a form field

Question

Any convenient ways to determine if a selected element is a form field, i.e is an input, select, checkbox etc?

Answer 1

In pure JavaScript you could do something like the Sizzle Engine

/^(?:input|select|textarea|button)$/i.test(el.nodeName)

Example

/**
 * Test is form action element
 * @param {Object} el 
 * @return {Boolean} true if a form action element
 */
const isInput = el => /^(?:input|select|textarea|button)$/i.test(el.nodeName);


// DEMO:
document.querySelectorAll('.foo').forEach(el => console.log(isInput(el)));

<textarea class="foo">test</textarea>
<button class="foo">test</button>
<input class="foo" type="text">
<div class="foo">test</div>
<p class="foo">test</p>

https://github.com/jquery/sizzle/blob/master/src/sizzle.js#L139

Answer 2

Use plain javascript:

$("#someelement")[0].tagName // will return name of tag (div, p, input, select, etc...)

The first index [0] of any jQuery object will return its DOM object. To do it completely in javascript:

document.getElementById("someelement").tagName;