Enabling/Disabling button on a certain condition

Question

I am using a Telerik Datetime control. On onBlur event of input box I am checking if the date is valid/in-valid, based upon that I am enabling or disabling the submit button (anchor tag actually).

var embedUrl = null;
function onBlur(sender) {
    var constants = {
        classDisabled: 'button-disabled',
        emptyHref: "javascript:void(0)"
    };
    if (sender) {
        var jqueryButton = window.jQuery('.button-submit');
        if (!embedUrl) {
            embedUrl = jqueryButton.href;
        }
        // Check if the string is valid date. 
        // As it's being triggerd from Telerik so we use _invalid
        if (sender._invalid) {
            // Date is in-valid, add the class disabled if it does not exists.
            if (!jqueryButton.hasClass(constants.classDisabled)) {
                jqueryButton.attr('href', constants.emptyHref);
                jqueryButton.addClass(constants.classDisabled);
            }
        } else {
            // Date is valid, remove the class disabled if already exists.
            if (jqueryButton.hasClass(constants.classDisabled)) {
                jqueryButton.attr('href', embedUrl);
                jqueryButton.removeClass(constants.classDisabled);
            }
        }
    }
}

I have an anchor tag which has some href which I need to persist.

I want to know how I can write this code a little cleaner.

Answer 1

Some things that crossed my mind:

• Your'e polluting the global namespace with embedUrl. Wrap your code in an IIFE, or make use of jQuery's data() method to pass around "global" variables.

IIFE example:

(function($, window, undefined){

    var embedUrl = null;

    // Do whatever you want in this scope without affecting window namespace
    // $ === jQuery, but you can still access the jQuery variable as well
    // window is passed for sligtly faster access
    // undefined is passed as an undefined argument to make sure it's
    // truly undefined (can be modified pre ES5)

})(jQuery)

// console.log(embedUrl); // undefined

jQuery's data example:

// Set data: 
jQuery('.button-submit').data({ foo: 'bar' });

// Get data:
var foo = jQuery('.button-submit').data('foo');
console.log(foo); // "bar"

* I prefer Hungarian notation on jQuery objects to improove readbility i.e. change

var jqueryButton = window.jQuery('.button-submit');

to

var $button = jQuery('.button-submit');

In your example, jqueryButton is a jQuery object, so you can't do jqueryButton.href. If you want to access the href property, use the prop() method:

var href = $button.prop('href');

However, if you extract the selected DOM element from your jQuery object, your code would have worked:

var button = $button.get(0), // or $button[0]
    href = button.href;

• Use prop() instead of attr(), unless you're using a really old jQuery version. More info here.

You can use toggleClass() with a switch for your class toggling:

jqueryButton.toggleClass(constants.classDisabled, sender._invalid);

And set the href like this:

jqueryButton.prop('href', sender._invalid ? constants.emptyHref : embedUrl);

Just my two cents.