Run JavaScript function on every input field

Question

I have a huge form with several input fields. This is a Balance and a Profit & Loss sheet, so the input text fields has to be formatted as "money". I found some nice jQuery plugin to do the formatting: accounting JS, but right now I have to call it manually on all the fields and this is not the best method I think...

How can I call the accounting.formatMoney() function on ALL the input text fields on keydown? So if there is a KeyDown or KeyUp event on the FORM or BODY, the script will find ALL the input fields and execute the script.

This is the formatting and the Javascript function I want to call on every INPUT text field:

var options = {
    symbol : "",
    thousand: " ",
    precision : 0,
    format: "%v%s"
};

var tmp = parseInt(document.getElementById('input_id').value, 10);
document.getElementById('input_id').value = accounting.formatMoney(tmp, options);

The form is sent back to BODY via AJAX, so I think the best method would be to call the function this way:

    $(document).ready(function(){
        $('body').on('keyup', 'input', function(e){
                    // collect all input fields and execute the function
        });
    });

Thank you very much for the help!

Denys Séguret · Accepted Answer · 2012-11-07 14:28:17Z

2

You might do

$(document).ready(function(){
    $('body').on('keyup', 'input', function(){
            $(this).val(accounting.formatMoney($(this).val(), options));
    });
});

But this supposes your users would like the input to be modified while they're typing.

If you want to have the input modified when the users leave the field or type 'enter', do this :

$(document).ready(function(){
    $('body').on('blur change', 'input', function(){
            $(this).val(accounting.formatMoney($(this).val(), options));
    });
});

Note that in a real world application I would have a class on my inputs to make the selector more selective ('input.money' instead of 'input').

EDIT :

If you want to apply this to the inputs in a table whose id is bstable, do

$(document).ready(function(){
    $('#bstable').on('blur change', 'input', function(){
            $(this).val(accounting.formatMoney($(this).val(), options));
    });
});

If the bstable table is obtained via ajax and isn't immediately here, you may do

$(document).ready(function(){
    $(document.body).on('blur change', '#bstable input', function(){
            $(this).val(accounting.formatMoney($(this).val(), options));
    });
});

edited Nov 7, 2012 at 14:28

answered Nov 7, 2012 at 9:45

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

A. Wolff Over a year ago

Will $('body').on('blur change') make it triggered twice as change is triggered on blur? Just wondering.

A. Wolff Over a year ago

I answered to my own comment, yes its triggered twice if text change.

Denys Séguret Over a year ago

@roasted not immediately : if you type enter, it's triggered once. If you click out of the input or go to another field and the field changed, it's triggered twice. If you go to another field or click out and the field didn't change, it's triggered once. Fiddle

A. Wolff Over a year ago

See this jsfiddle: jsfiddle.net/EDMvh If you write some text in input then make it lost focus, callback is triggered twice. However, a condition on event.type should suffice. +1

Denys Séguret Over a year ago

Simply use $('body').on('blur change', '#bstable input', function(){

|

Sergii · Accepted Answer · 2012-11-07 09:49:01Z

0

$('body').on('keyup', 'input', function(){
       $("body").find("input").each(function(index, element){
            $(element).val(accounting.formatMoney($(element).val(), options));
       });
});

answered Nov 7, 2012 at 9:49

Sergii

1,33010 silver badges10 bronze badges

Collectives™ on Stack Overflow

Run JavaScript function on every input field

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related