I'm trying to add some validation to a form. I have a jQuery function that is doing exactly what I want:

      jQuery('#post').submit(function() {
                if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').removeClass('button-primary-disabled');
                    return true;
                }else{
                    alert("Please set a Featured Image!");
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').addClass('button-primary-disabled');
                    return false;
                }
                return false;
            });

However, I want to change it so that this function only runs if a radio button elsewhere on the page is selected. So I tried this:

if (jQuery('#top').checked) {
      jQuery('#post').submit(function() {
                if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').removeClass('button-primary-disabled');
                    return true;
                }else{
                    alert("Please set a Featured Image!");
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').addClass('button-primary-disabled');
                    return false;
                }
                return false;
            });
    }

That doesn't work - the function doesn't get called even if #top is checked. Can anyone explain why? I'm used to PHP, and JavaScript often throws curveballs at me.

I'm trying to add some validation to a form. I have a jQuery function that is doing exactly what I want:

      jQuery('#post').submit(function() {
                if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').removeClass('button-primary-disabled');
                    return true;
                }else{
                    alert("Please set a Featured Image!");
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').addClass('button-primary-disabled');
                    return false;
                }
                return false;
            });

However, I want to change it so that this function only runs if a radio button elsewhere on the page is selected. So I tried this:

if (jQuery('#top').checked) {
      jQuery('#post').submit(function() {
                if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').removeClass('button-primary-disabled');
                    return true;
                }else{
                    alert("Please set a Featured Image!");
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').addClass('button-primary-disabled');
                    return false;
                }
                return false;
            });
    }

That doesn't work - the function doesn't get called even if #top is checked. Can anyone explain why? I'm used to PHP, and JavaScript often throws curveballs at me.

• javascript
• jquery
• function
• if-statement

Share Improve this question Follow asked Jan 31, 2013 at 23:57 Morgan KayMorgan Kay 30822 gold badges33 silver badges1919 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

What does firebug or Chrome console tell you? You could try something like this:

$('#top').is(':checked')

as in (thanks RET):

jQuery('#post').submit(function() {
  if ($('#top').is(':checked')) {
    if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
      jQuery('#ajax-loading').hide();
      jQuery('#publish').removeClass('button-primary-disabled');
      return true;
    }else{
      alert("Please set a Featured Image!");
      jQuery('#ajax-loading').hide();
      jQuery('#publish').addClass('button-primary-disabled');
      return false;
    }
  }
  return false;
});

try

$('#top').is(':checked')

but the function submit only binds the function and calls it every time submit is clicked. so you must put the checked check in the submit function

  jQuery('#post').submit(function() {

            if(!$('top').is(':checked')){ return };

            if (jQuery("#set-post-thumbnail").find('img').size() > 0) {
                jQuery('#ajax-loading').hide();
                jQuery('#publish').removeClass('button-primary-disabled');
                return true;
            }

            alert("Please set a Featured Image!");
            jQuery('#ajax-loading').hide();
            jQuery('#publish').addClass('button-primary-disabled');
            return false;

        });

Yeah, that logic won't quite do what you're hoping for. Try something like:

  jQuery('#post').submit(function() {
      if ($('#top').is(':checked')) {
            // all your existing code

I could be wrong, but I don't think the answer given by @greener is going to work, because that will only declare the submit function if #top is checked at page create time.