jQuery check if <input> exists and has a value

Question

I have the following example:

<input type="text" class="input1" value="bla"/>

Is there a way to check if this element exists and has a value in one statement? Or, at least, anything shorter then

if($('.input1').length > 0 && $('input1').val() != '')

Just getting frustrated here with mile-long conditions.

Maybe make a helper function if you use the same kind of condition many times. — mirrormx
– mirrormx, Commented Mar 18, 2013 at 16:14
if($(selector).val()) should work. If the element doesn't exist it will return 'undefined' and if it does but has no length it will return "" (which evaluates as a false). — Ben Jacobs
– Ben Jacobs, Commented Mar 18, 2013 at 16:15
@Benmj would 'undefined' evaluate to false as well? I thought it wouldn't. — Dimskiy
– Dimskiy, Commented Mar 18, 2013 at 16:17
@isherwood This is not a duplicate. I want to know if the element exists AND has a value at the same time. — Dimskiy
– Dimskiy, Commented Mar 18, 2013 at 16:18
@Dimskiy : it shouldn't if ($('#foobar').val()) { console.log('You will not see this') } — Ben Jacobs
– Ben Jacobs, Commented Mar 18, 2013 at 16:20

Brian · Accepted Answer · 2014-08-25 23:32:34Z

170

The input won't have a value if it doesn't exist. Try this...

if($('.input1').val())

edited Aug 25, 2014 at 23:32

answered Mar 18, 2013 at 16:14

Brian

38.2k24 gold badges100 silver badges112 bronze badges

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

5 Comments

Dimskiy Over a year ago

I ended up writing a few small functions, but this example was used, too.

ismail baig Over a year ago

@Christian: input1 is not a html tag in the above answer but is a class.

Code Buster Over a year ago

I dont complete agree to trust on the value attribute of the input element. It can at times be empty (no value inside it), yet still be present in the scope. So the best is to rely on $('.input1').length > 0 and then do whatever processing.

Seth Jeffery Over a year ago

Empty string evaluates as false. Try it in console if("") { true } else { false } So this is the correct answer.

carloswm85 Over a year ago

null value is false.

Curtis · Accepted Answer · 2013-03-18 16:13:30Z

38

You could do:

if($('.input1').length && $('.input1').val().length)

length evaluates to false in a condition, when the value is 0.

answered Mar 18, 2013 at 16:13

Curtis

104k69 gold badges280 silver badges359 bronze badges

3 Comments

the system Over a year ago

@MarkWalters: There's no downvote here, but it's not much of an improvement over the original.

Robert Waddell Over a year ago

I'll upvote you Curt. The addition of .length is my preference here.

I try so hard but I cry harder Over a year ago

@thesystem this answer is a big improvement compared to the original. The original trusts on val(), which will evaluate to false on empty strings whereas this doesn't. That aside, upon trying the accepted answer, it failed for me, but Curt his answer did it.

97ldave · Accepted Answer · 2013-03-18 16:20:25Z

13

You can do something like this:

jQuery.fn.existsWithValue = function() { 
    return this.length && this.val().length; 
}

if ($(selector).existsWithValue()) {
        // Do something
}

edited Mar 18, 2013 at 16:20

answered Mar 18, 2013 at 16:13

97ldave

5,2594 gold badges28 silver badges39 bronze badges

Comments

Andrew Barber · Accepted Answer · 2014-06-23 14:21:55Z

Just for the heck of it, I tracked this down in the jQuery code. The .val() function currently starts at line 165 of attributes.js. Here's the relevant section, with my annotations:

val: function( value ) {
    var hooks, ret, isFunction,
        elem = this[0];

        /// NO ARGUMENTS, BECAUSE NOT SETTING VALUE
    if ( !arguments.length ) {

        /// IF NOT DEFINED, THIS BLOCK IS NOT ENTERED. HENCE 'UNDEFINED'
        if ( elem ) {
            hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

            if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                return ret;
            }

            ret = elem.value;

            /// IF IS DEFINED, JQUERY WILL CHECK TYPE AND RETURN APPROPRIATE 'EMPTY' VALUE
            return typeof ret === "string" ?
                // handle most common string cases
                ret.replace(rreturn, "") :
                // handle cases where value is null/undef or number
                ret == null ? "" : ret;
        }

        return;
    }

So, you'll either get undefined or "" or null -- all of which evaluate as false in if statements.

KyleMit · Accepted Answer · 2018-04-01 23:29:18Z

You can create your own custom selector :hasValue and then use that to find, filter, or test any other jQuery elements.

jQuery.expr[':'].hasValue = function(el,index,match) {
  return el.value != "";
};

Then you can find elements like this:

var data = $("form input:hasValue").serialize();

Or test the current element with .is()

var elHasValue = $("#name").is(":hasValue");

jQuery.expr[':'].hasValue = function(el) {
  return el.value != "";
};


var data = $("form input:hasValue").serialize();
console.log(data)


var elHasValue = $("[name='LastName']").is(":hasValue");
console.log(elHasValue)

label { display: block; margin-top:10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <label>
    First Name:
    <input type="text" name="FirstName" value="Frida" />
  </label>

  <label>
    Last Name:
    <input type="text" name="LastName" />
  </label>
</form>

Further Reading:

zmag · Accepted Answer · 2019-08-08 23:05:57Z

0

if($('#user_inp').length > 0 && $('#user_inp').val() != '')
{

    $('#user_inp').css({"font-size":"18px"});
    $('#user_line').css({"background-color":"#4cae4c","transition":"0.5s","height":"2px"});
    $('#username').css({"color":"#4cae4c","transition":"0.5s","font-size":"18px"});

}

edited Aug 8, 2019 at 23:05

zmag

8,27112 gold badges39 silver badges47 bronze badges

answered Aug 8, 2019 at 22:49

Mirza Arsal Chaudhry

12 bronze badges

Comments

BWP · Accepted Answer · 2016-12-26 18:05:33Z

-1

I would do something like this: $('input[value]').something . This finds all inputs that have value and operates something onto them.

answered Dec 26, 2016 at 18:05

BWP

1

Collectives™ on Stack Overflow

jQuery check if <input> exists and has a value

7 Answers 7

5 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related