jQuery check for none empty input

Question

I am trying to figure out an issue I am having with jQuery.

I am working in the WordPress backend. I have two divs. The first is an input text that gets populated with an image URL when an 'Upload' button is clicked and an image is selected. The second div is irrelevant but basically, when the first input text div gets populated, I would like the second to show.

Now, I've tried to do simple things like:

if ($('#section-logo input').val() != '') {
    logo_position_section.show();
}

Which works fine, but only after you click save and the page refreshes.

focus() won't work in this case either unless the user manually clicks inside the input text and types something in.

How do I go about checking if there is in fact a value in the first div, but without having to refresh the page and not having to use focus? Thanks.

Yury Tarabanko · Accepted Answer · 2012-11-19 15:38:11Z

1

Bind on input change and perform check on load.

$(function(){
   var showLogoPosition = function(el) {
        if(el.val() !== '') {
           logo_position_section.show(); 
        }
   },
   input = $('#section-logo input');
   input.change(function(){
       showLogoPosition($(this));
   });

   showLogoPosition(input);
})

edited Nov 19, 2012 at 15:38

answered Nov 19, 2012 at 15:31

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

13 Comments

mousesports Over a year ago

Tried something similar earlier - does not work in this case - which left me pretty puzzled.

mousesports Over a year ago

It also seems that after you click upload, and the input text field gets populated, the actual value (in the HTML code) does not change... value is blank.

Yury Tarabanko Over a year ago

Well, it should work, provided that #section-logo input has some value in it.

mousesports Over a year ago

I know it should :p But it's weird that 'value' doesn't actually get populated with anything (when inspecting the element).

mousesports Over a year ago

Thanks Yury. Your code looks legit, but it still doesn't work in this case. I did not code this WordPress options framework, so some things leave me puzzled. I should note also, after you select an image and the input gets populated, a new div with a screenshot of the image is added underneath the text field. How could I just check if the div exists, but again, without a page refresh?

|

Bruno · Accepted Answer · 2012-11-19 15:45:13Z

0

Maybe use the jQuery change event

$('#section-logo input').change( function() {
    if ( $(this).val() !== "" ) {
        logo_position_section.show();
    }
}

answered Nov 19, 2012 at 15:45

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery check for none empty input

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related