css/javascript element returning false when it should return true

Question

I have a one field form (text input and submit button). Here is the form code:

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <li>
        <input id="resume-field" class="field field288" type="text"
          value="Type a speciality you want to add to your profile" 
          title="Type a speciality you want to add to your profile" 
          name="skill[label]"></input>
    </li>
    <li class="td80">
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

Using javascript, if text is entered in the text field, the submit button should be unclickable. If there is no text in the field, it should be clickable. I am doing that by using javascript to remove and/or put back the button-add-disabled class. Here is the javascript:

(function($){
    $(document).on('focusin', '#resume-field', function() {
        $(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
    }).on('focusout', '#resume-field', function(){
        if(this.value==' '||this.title==this.value) {
            $(this).parents().find('.button-add').addClass('button-add-disabled');
        } else {
            $(this).parents().find('.button-add').removeClass('button-add-disabled');
        }

    });     

    $('.button-add-disabled').click(function(){
        return false;
    });
}(jQuery));

And here is the css:

.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block; 
   font-size: 11px; line-height: 28px ; color: #fff; text-align: center; 
   font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto; 
   border-radius: 3px; }
.button-add:hover { text-decoration: none;
   -webkit-transition:none; 
      -moz-transition:none; 
       -ms-transition:none; 
        -o-transition:none; 
           transition:none; 
}
.td80 .button-add { margin-left:35px !important;  }
.button-add-disabled { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px;  }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0;  }

The classes are changing as expected and the javascript is working. For some reason though, even if .button-add-disabled is not applied to the form element, the form element is still returning false and therefore won't submit. When "button-add-disabled" is removed by the javascript, the form should submit. I can see the server logs. If I remove the line from the javascript "return: false", the form works, So i know the form itself works. I'm pretty sure something is wrong with the javascript. Any ideas?

Answer 1

That's not how that works. Events are bound to elements, which are reached via selectors; they are not bound to selectors.

When you bind the event directly to the element, the event is now bound to that element until you explicitly unbind it. The original selector is no longer relevant.

You need to do this, or something like it:

$('.button-add-disabled').click(function(){
  return !$(this).hasClass('button-add-disabled');
});

That is, test whether the button is currently disabled by your class at the point the event is raised.

As an aside, this...

if(this.value==' '||this.title==this.value) {
  $(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
  $(this).parents().find('.button-add').removeClass('button-add-disabled');
}

should be this:

var disabled = this.value == ' ' || this.title == this.value;
$(this).parents().find('.button-add').toggleClass('button-add-disabled', disabled);

Answer 2

You want to set/remove the disabled attribute of the input element, not set a CSS style which is for display purposes only

$('#resume-field').on('change', function() {
    if ($(this).val().length == 0) {
        $(this.form).find('input[type=submit]').attr('disabled', false).removeClass('button-add-disabled');
    } else {
        $(this.form).find('input[type=submit]').attr('disabled', true).addClass('button-add-disabled');
    }
})

jsFiddle Demo

Also be sure that you handle the submission of the form when the user presses enter in the input field, you can do that using the jQuery .submit event handler and preventing the default behaviour. It is also essential you handle this server side.

EDIT: I just noticed what the CSS was doing, updated answer.