jQuery - determine if input element is textbox or select list

Question

How would I determine whether the element returned by an :input filter in jQuery is a textbox or select list?

I want to have a different behavior for each ( textbox returns text value, select returns both key and text)

Example setup:

<div id="InputBody">
    <div class="box">
        <span id="StartDate">
            <input type="text" id="control1">
        </span>
        <span id="Result">
            <input type="text" id="control2">
        </span>
        <span id="SelectList">
            <select>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </span>
    </div>
    <div class="box">
        <span id="StartDate">
            <input type="text" id="control1">
        </span>
        <span id="Result">
            <input type="text" id="control2">
        </span>
        <span id="SelectList">
            <select>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </span>
    </div>
</div>

and then the script:

$('#InputBody')
    // find all div containers with class = "box"
    .find('.box')
    .each(function () {
        console.log("child: " + this.id);

        // find all spans within the div who have an id attribute set (represents controls we want to capture)
        $(this).find('span[id]')
        .each(function () {
            console.log("span: " + this.id);

            var ctrl = $(this).find(':input:visible:first');

            console.log(this.id + " = " + ctrl.val());
            console.log(this.id + " SelectedText = " + ctrl.find(':selected').text());

        });

user113716 · Accepted Answer · 2011-02-24 17:38:34Z

190

You could do this:

if( ctrl[0].nodeName.toLowerCase() === 'input' ) {
    // it was an input
}

or this, which is slower, but shorter and cleaner:

if( ctrl.is('input') ) {
    // it was an input
}

If you want to be more specific, you can test the type:

if( ctrl.is('input:text') ) {
    // it was an input
}

answered Feb 24, 2011 at 17:38

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Observer Over a year ago

I had to add the jquery syntax $(element).is('input') to get it to work but all in all great.

Stranger · Accepted Answer · 2016-07-01 18:36:40Z

30

alternatively you can retrieve DOM properties with .prop

here is sample code for select box

if( ctrl.prop('type') == 'select-one' ) { // for single select }

if( ctrl.prop('type') == 'select-multiple' ) { // for multi select }

for textbox

  if( ctrl.prop('type') == 'text' ) { // for text box }

edited Jul 1, 2016 at 18:36

Stranger

10.7k18 gold badges84 silver badges121 bronze badges

answered Jun 16, 2013 at 10:55

Rohit

5385 silver badges10 bronze badges

1 Comment

Thomas.Benz Over a year ago

This works like a charm with new jQuery function prop(). Thanks.

Elikill58 · Accepted Answer · 2024-05-06 09:45:19Z

21

If you just want to check the type, you can use jQuery's .is() function,

Like in my case I used below,

if($("#id").is("select")) {
  alert('Select'); 
} else if($("#id").is("input")) {
  alert("input");
}

edited May 6, 2024 at 9:45

Elikill58

5,04527 gold badges33 silver badges65 bronze badges

answered Jun 17, 2018 at 15:35

Umesh Patil

5,01838 silver badges26 bronze badges

Comments

Flo Develop · Accepted Answer · 2023-08-02 13:12:59Z

0

You can determine if a form element is an input or a select with this code :

$('ElementSelector').prop('tagName').toLowerCase();

answered Aug 2, 2023 at 13:12

Flo Develop

7641 gold badge7 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery - determine if input element is textbox or select list

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related