how to minimize repetitive code in jquery? [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 8 years ago.

Improve this 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);
        }
    });

Answer 1

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);

Answer 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

Answer 3

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.

Answer 4

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.