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.