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!

Answer 1

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