10

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

Mark Nguyen
  • 7,168
  • 9
  • 31
  • 41

5 Answers5

17

You can use .is(':input') to test if it's any kind of form element.

Docrefs:

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • 3
    Sometimes I just love jQuery. :) – Anders Arpi Jul 27 '12 at 13:49
  • 2
    Yes, `:input` (with the colon) is a pseudo selector that matches them all. The docs say so, too, btw: *"Selects all input, textarea, select and button elements."* – ThiefMaster May 21 '13 at 06:28
  • The scope of the selector might not be enough if WebComponents with attached internals are involved, see [my comment](https://stackoverflow.com/a/76471469/343721) (posted as an answer due to formatting and length limits). – Jan Turoň Jun 14 '23 at 08:42
5

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;
Austin
  • 6,026
  • 2
  • 24
  • 24
  • 2
    Occurred to me that this is also possible: `var accept = ["FORM", "INPUT", "SELECT"];` `accept.indexOf($("#someelement")[0].tagName);` – Mark Nguyen Jul 27 '12 at 14:04
  • 1
    Right, just remember that `indexOf` returns the index of the array (`>=0`) that the value is matched to, and returns -1 if the search string is not in the array. – Austin Jul 27 '12 at 14:10
2

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

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

After a decade, .is(":input") may not be enough, as the input selector

selects [only] all input, textarea, select and button elements

but we can also have WebComponents with attached internals which can act as form fields, too.

To determine if the element is a form field, the plain javascript would be

function isFormField(elem) {
  // elem is expected to be HTMLElement instance
  return "value" in elem;
}

...or, if you love jQuery, it can be simplified to awesome concise extension

$.fn.isFormField = function(index=0) {
  let elem = this.get(index);
  if (!(elem instanceof HTMLElement)) return false;
  return "value" in elem;
}

if ($(myElement).isFormField()) ...

...or, if you use ES6+, there is a complicated way to code it, which just sucks

const isFormField = elem => elem instanceof HTMLElement && "value" in elem;

if (isFormField(myElement)) ...

I hope I used the jQuery terminology correctly.

Jan Turoň
  • 31,451
  • 23
  • 125
  • 169
-1

$('#formid').find('id_element');

jquery find

Hope this helped

Tiago Moutinho
  • 1,372
  • 1
  • 13
  • 18