Search code examples
jqueryjquery-selectors

jQuery - determine if input element is textbox or select list


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());

        });

Solution

  • 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
    }