Is there a way to ch...">
Best IT Recipes

JQuery check if <input> exists and matters

I have the following example:

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

Is there a way to check if this element exists and has meaning in a single expression? Or at least something shorter than

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

Just get discouraged here with minimal conditions.

+64
javascript jquery
Mar 18 '13 at 16:11
source share
7 answers

Input will not matter if it does not exist. Try it...

 if($('.input1').val())
+124
Mar 18 '13 at 16:14
source share

You can do:

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

length is false if the value is 0 .

+25
Mar 18 '13 at 16:13
source share

You can do something like this:

 jQuery.fn.existsWithValue = function() { return this.length && this.val().length; } if ($(selector).existsWithValue()) { // Do something }
+13
Mar 18 '13 at 16:13
source share

Just for this, I traced this in jQuery code. The .val () function now starts at line 165 attributes.js . Here is 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 either get undefined , either "" or null - all of which are evaluated as false in if statements.

+9
Mar 18 '13 at 16:37
source share

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

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

Then you can find the following items:

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

Or test the current item 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 :

+2
Apr 01 '18 at 21:19
source share
 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"}); }
0
Aug 08 '19 at 22:49
source share

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

-one
Dec 26 '16 at 18:05
source share


More articles:


All Articles