how to minimize repetitive code in jquery?

Question

How can I minimize the following bindings in jquery:

    var profileIdDefault = "Profile ID";
    var organisationIdDefault = "Competitor ID";
    var FromDateDefault = "From Date";
    var ToDateDefault = "To Date";


    $("#startDate").focus(function () {
        if ($(this).val() === FromDateDefault) {
            $(this).attr("value", "");
        }
    });
    $("#startDate").blur(function () {
        if ($(this).val() === '') {
            $(this).val(FromDateDefault);
        }
    });

    $("#endDate").focus(function () {
        if ($(this).val() === ToDateDefault) {
            $(this).attr("value", "");
        }
    });
    $("#endDate").blur(function () {
        if ($(this).val() === '') {
            $(this).val(ToDateDefault);
        }
    });

    $("#profileID").focus(function () {
        if ($(this).val() === profileIdDefault) {
            $(this).attr("value", "");
        }
    });
    $("#profileID").blur(function () {
        if ($(this).val() === '') {
            $(this).val(profileIdDefault);
        }
    });

    $("#organisationID").focus(function () {
        if ($(this).val() === organisationIdDefault) {
            $(this).attr("value", "");
        }
    });
    $("#organisationID").blur(function () {
        if ($(this).val() === '') {
            $(this).val(organisationIdDefault);
        }
    });

And, what you're really asking is "How to refactor this jquery code?" — Adam Eberlin, Apr 25 '13 at 08:53

skuntsel · Accepted Answer · 2013-04-25T10:43:48.860

3

Stay DRY. Example:

function setup(id, toCompare) {
    $(id).focus(function () {
        if ($(this).val() === toCompare) {
            $(this).attr("value", "");
        }
    }).blur(function () {
        if ($(this).val() === '') {
            $(this).val(toCompare);
        }
    });
}
setup("#startDate", FromDateDefault);
setup("#endDate", ToDateDefault);
setup("#profileID", profileIdDefault);
setup("#organisationID", organisationIdDefault);

edited Apr 25 '13 at 10:43

answered Apr 25 '13 at 08:42

skuntsel

11,624
11
44
67

1

You are making 2 DOM operations by $(id). You can either cache the $(id) variable or take advantage of chainable property of jquery. It will save you 1 DOM operation. Just to make code more better..Anyways nice approach So +1 :) – Sachin Jain Apr 25 '13 at 08:48

score 2 · Answer 2 · answered Apr 25 '13 at 08:47

2

You can also do this simply, by using the placeholder

<input id="startdate" placeholder="From Date" /><br />
<input id="endDate" placeholder="To Date" /><br />

FIDDLE

answered Apr 25 '13 at 08:47

palaѕн

72,112
17
116
136

1

I will do it using placeholder too.. – Sachin Jain Apr 25 '13 at 08:51
That's of course the best solution. But HTML5 wasn't mentioned anywhere, as well as the question was not about alternative propositions, but about code refactoring to exclude repetitiveness. – skuntsel Apr 25 '13 at 08:56
1

As they say, "[The Best Code is No Code At All](http://www.codinghorror.com/blog/2007/05/the-best-code-is-no-code-at-all.html)" – palaѕн Apr 25 '13 at 09:03

Sachin Jain · Answer 3 · 2013-04-25T08:44:39.883

0

You can do something like this:-

function toggleValue(valToCompare) {
     if ($(this).val() === valToCompare) {
         $(this).attr("value", "");
     } else if ($(this).val() === '') {
         $(this).val(valToCompare);
     }
}

$("#startDate").focus(function() {
    this.toggleValue(FromDateDefault);
}).blur(function() {
    this.toggleValue(FromDateDefault);
});

You can do the same for rest of the elements.

edited Apr 25 '13 at 08:44

answered Apr 25 '13 at 08:39

Sachin Jain

21,353
33
103
168

Not going to work, as `FromDateDefault` is not the only variable in use. You'd better include an additional parameter to it. – skuntsel Apr 25 '13 at 08:44

score 0 · Answer 4 · answered Apr 25 '13 at 08:43

You could store some of the data in the element using a data attribute. Then you can test the value associated with the element. For example...

<input id="startdate" class="focus-value" data-empty="From Date" />
<input id="enddate" class="focus-value" data-empty="To Date" />

The in the jquery...

$(".focus-value").focus(function() { 
    if $(this).val() === $(this).data('empty') { 
         $(this).attr("value", "");
    }
});

Allowing you to combine all the focus and blur handlers.

how to minimize repetitive code in jquery?

4 Answers4