jQuery calculate value on Text_Change

I have 3 textboxes.

• Price
• Percent
• Result

I want to display result on Result textbox when value of Price textbox or Percent is change.

The formula is very easy but I don't know what it doesn't work !

Result = Percent/100 * price

Percent just can be between values 0 to 9 . I wrote this code . where is the problem from ?

  var textbox = $("#<%= txtTaxPercent.ClientID %>");
            var ResultTextbox = $("#<%= txtfctTaxValue.ClientID %>");
        开发者_Python百科    var PriceTextbox = $("#<%= txtPurePrice.ClientID %>");
            $(textbox).keydown(function (e) {
                var Result1;
                Result1 = (parseFloat(textbox.val()) / 100) * parseInt(PriceTextbox.val());
                ResultTextbox.val('');
                ResultTextbox.val(Result1);
            });
            $(PriceTextbox).keydown(function (e) {
                var Result2;
                Result2 = (parseFloat(textbox.val()) / 100) * parseInt(PriceTextbox.val());
                ResultTextbox.val('');
                ResultTextbox.val(Result2);
            });

My first thought is that you want change rather than keydown. Edit: Actually, you probably want change, keypress, keydown, and keyup just to cover your bases, since change doesn't fire until you leave the field; depends how immediate you want to be. You can also throw paste in there, as some browsers may support that. Possibly even blur to be sure that regardless of how they changed the value, if they leave the field you recalc.

Also, there's no reason to call val() with an empty string, just to turn around and call it with your result. The second call will always overwrite the value written by the first call. And there's no need to call $() a second time on a jQuery object. So:

You can also condense the code a bit. So:

var textbox = $("#<%= txtTaxPercent.ClientID %>");
var ResultTextbox = $("#<%= txtfctTaxValue.ClientID %>");
var PriceTextbox = $("#<%= txtPurePrice.ClientID %>");
$([textbox[0], PriceTextbox[0]]).bind("change keyup keydown paste blur", function(e) {
    var Result;
    Result = (parseFloat(textbox.val()) / 100) * parseInt(PriceTextbox.val(), 10);
    ResultTextbox.val(Result);
});  

Live example (in the code there, naturally I've had to take out the ASP.Net stuff)

That $([textbox[0], ResultTextbox[0]]) bit is tricky: I'm creating an array of raw DOM elements from two raw elements, the element at index 0 of textbox and the element at index 0 of PriceTextbox, then passing that into $() to wrap them in a jQuery object.

I've used bind to bind multiple events, to cover our bases.

As @diEcho pointed out, I've also added the radix argument to parseInt. It's almost always best to supply a radix (unless you explicitly want to allow people to type things like "0xfe" for 254).

try with change on both textbox anytime and also use live with multiple selector

raw code ( just the logic)

var textbox = $("#<%= txtTaxPercent.ClientID %>");
var ResultTextbox = $("#<%= txtfctTaxValue.ClientID %>");
var PriceTextbox = $("#<%= txtPurePrice.ClientID %>");

$([ textbox[0], PriceTextbox[0] ]).live('change',function (e) {
    var Result1;
    Result1 = (parseFloat(textbox.val()) / 100) * parseInt(PriceTextbox.val(),10);
    ResultTextbox.val(Result1);
});

References

jQuery Multiple Selector

live

change

I think it should be keyUp and not keyDown because at keydown textbox.val() will not give you latest value. Also, in order to cover all the other scenerios, i think you will have to use keypress and paste function also.

Below is the code which i wrote for allowing only numeric values in a textbox. You can get an idea from it.

function CheckNumeric() {
    $('.IsNumeric')
    .keydown(function(event) {
        var key = event.which;
        if (event.shiftKey == true)
            return (key == 36 || key == 35 || key == 39 || key == 37 || key == 9);
        else//When SHIFT key is not down
            return ((key >= 48 && key <= 57) || key == 8 || key == 9 || key == 37 || key == 39 || key == 46 || key == 36 || key == 35 || (key >= 96 && key <= 105));
    }).bind('paste', function(event) {
        return (!isNaN(clipboardData.getData("text")));
    }).keyup(function(event) {
        var _Value = $(event.target).val();
        var _OldValue = $(event.target).val();
        for (var iCount = 0; iCount < _OldValue.length; iCount++) {
            if (_Value.charAt(0) == 0) {
                _Value = _Value.substring(1, _Value.length);
                $(event.target).val(_Value);
            }
        }
    }).focusout(function(event) {
        var _Value = $(event.target).val();
        var _OldValue = $(event.target).val();
        for (var iCount = 0; iCount < _OldValue.length; iCount++) {
            if (_Value.charAt(0) == 0) {
                _Value = _Value.substring(1, _Value.length);
                $(event.target).val(_Value);
            }
        }
    }).keypress(function(event) {
        var _Value = $(event.target).val();
        var _OldValue = $(event.target).val();
        for (var iCount = 0; iCount < _OldValue.length; iCount++) {
            if (_Value.charAt(0) == 0) {
                _Value = _Value.substring(1, _Value.length);
                $(event.target).val(_Value);
            }
        }
    });
}

Try with just textbox.keydown(... and PriceTextBox.keydown(... No dollar sign no parenthesis.