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.

Answer 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);
})