CODEWITHSUNDEEP
javascriptjquery
zmuci
zmuci

Reputation: 538

Jquery check for text value on page load

So basically I'm making a input form and I want to style it a bit. At the moment it works if you enter the form without any values in fields and you enter your values. But if some data is pasted via PHP or value="" tag it doesn't work. I understand why it doesn't work, since script is triggered on focusout. Now my question is how can I modify my script to check for text values as soon as it loads and triggers?

$(function () {
    $('.settingsv2 .input_effect input').focusout(function () {
        var text_val = $(this).val();
        if (text_val === "") {
            $(this).removeClass('has-value');
        } else {
            $(this).addClass('has-value');
        }
    });
});

http://jsfiddle.net/202ap3pw/1/

Upvotes: 1

Views: 12010

Answers (3)

zmuci
zmuci

Reputation: 538

$(document).ready(function(){ 
    var text_val = $('.settingsv2 .input_effect input').val();    
    //alert(text_val);
    if(text_val === "") {      
      $('.settingsv2 .input_effect input').removeClass('has-value');      
    } else {      
      $('.settingsv2 .input_effect input').addClass('has-value');      
    }    
});

So this is what I did, thanks to APAD1 and zim32. I removed focusout, and changed "this" to the path I needed.

Upvotes: 0

zim32
zim32

Reputation: 2619

You should remove focusout bind, because $(function(){}) is already called after page ready.

Upvotes: 1

APAD1
APAD1

Reputation: 13666

Just take the function out of the focusout and fire it on document ready:

$(function () {
    var text_val = $(.settingsv2 .input_effect input).val();
    if (text_val === "") {
        $(.settingsv2 .input_effect input).removeClass('has-value');
    } else {
        $(.settingsv2 .input_effect input).addClass('has-value');
    }
});

Upvotes: 7

Related Questions