CODEWITHSUNDEEP
jquery
Delebrin
Delebrin

Reputation: 1059

How do I condense multiple jQuery functions into one?

I'm fairly new to jQuery still and am trying to pick up ways to help optimize my code. I'm currently working on an application in which I'm calling some calculation methods everytime someone leaves a field (.blur). I only want to call these methods when certain criteria are met (such as value != 0). I have 9 fields where I'm calculating and checking currently.

$(document).ready(function () {
var currentValue = {};

$("#txtValue1").focus(function () {
    currentValue = $(this).val();
}
).blur(function () {
    $("#txtValue1").valid();
    if (currentValue != $("#txtValue1").val() && $("#txtValue1").val() != "") {
        CallCalculations();
    }
});

$("#txtValue2").focus(function () {
    currentValue = $(this).val();
}
).blur(function () {
    $("#txtValue2").valid();
    if (currentValue != $("#txtValue2").val() && $("#txtValue2").val() != "") {
        CallCalculations();
    }
});
});

function CallCalculations() {
    // Do Stuff
};

I know it's possible to condense these functions down into one more generic one (using a CSS class as a selector instead of an ID) but I just can't seem to figure it out as I'm still new to jQuery / Javascript in general. Any help would be greatly appreciated. Thank you!

Upvotes: 6

Views: 185

Answers (5)

fearofawhackplanet
fearofawhackplanet

Reputation: 53378

Firstly, you don't need to do the value caching on focus and blur. You can use change().

If you were to asign a class to all your textboxes you want checking... eg:

<input type="text" class="calculateOnChange" />

then you can use a class jQuery selector:

$('.calculateOnChange').change(function() {
    if($(this).val() != '') {
        CallCalculations(this);
    }
});

Or more generally, you could apply to each text box in the document with:

$(':input[type=text]').change( /* ...etc */ ));

Upvotes: 4

Bob Fincheimer
Bob Fincheimer

Reputation: 18036

You can consolidate similar things like this:

$(document).ready(function() {
  var currentValue = {};

  $("#txtValue1, #txtValue2, #txtValue3, #txtValue4").focus(function() {
    currentValue = $(this).val();
  }).blur(function() {
    $(this).valid();
    if (currentValue != $(this).val() && $(this).val() != "") {
      // DO STUFF??
    }
  });
});

I don't know if that is what you are looking for?

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382666

You could refactor it like this for both inputs:

$("#txtValue1, #txtValue2").focus(function () {
    currentValue = $(this).val();
}
).blur(function () {
    $(this).valid();
    if (currentValue != $(this).val() && $(this).val() != "") {
        CallCalculations();
    }
});

Upvotes: 0

PetersenDidIt
PetersenDidIt

Reputation: 25620

Give your elements a class like textValues and then you can do this:

$(document).ready(function () {
var currentValue = {};

$(".textValues").focus(function () {
    currentValue = $(this).val();
}).blur(function () {
    var that = $(this);
    that.valid();
    if (currentValue != that.val() && that.val() != "") {
        CallCalculations();
    }
});
});

function CallCalculations() {
    // Do Stuff
};

Upvotes: 0

DMA57361
DMA57361

Reputation: 3690

You can combine you id selectors like this:

$("#txtValue1, #txtValue2").focus( //etc...

Or you can use a CSS selector like this (just set the class on the relevant HTML elements as you would any other class):

$(".txtValue").focus( //etc...

And inside the blur function you can refer to $(this) instead of recalling the selection.

Final result.

$(".txtValue").focus(function () {    
    currentValue = $(this).val();    
}    
).blur(function () {    
    $(this).valid();    
    if (currentValue != $(this).val() && $(this).val() != "") {    
        CallCalculations();    
    }    
});

Upvotes: 5

Related Questions