making jQuery plug-in autoNumeric format fields by time page loads...

Question

Hi,

I've been messing around with autoNumeric, a plug-in for jQuery that formats currency fields.

I'd like to wire the plug-in so that all currency fields are formatted by the time the user sees the page, e.g., on load.

Currently, the default that I can't seem to get around is that fields are formatted upon blur, key-up or other action in the fields themselves.

I've been experimenting with the plug-in code and it looks like it will take this relative newcomer some time to resolve this, if at all.

Anybody on this?

Lille

Answer 1

This should work.

jQuery(function($) {
$('input.auto').ready(function(){
    $('input.auto').autoNumeric();
    var inputID = uniqueID; // use the jQuery.get() function to retrieve data
    var formatValue = '1234.00'; // use the jQuery.get() function to retrieve data
    if(jQuery().autoNumeric){
        $('#id').val($.fn.autoNumeric.Format(inputID, formatValue));
    }
    else{
     alert('plugin not available');
    }
  });   
});

Bob

Answer 2

I just ran into this problem myself. I had to make it more general, but this worked for me:

$('input.auto-numeric').ready(function(){
var format_options = {
    aSign: '$'  
};
$('input.auto-numeric').each(function(){
    $(this).autoNumeric(format_options);
    if($(this).attr('id')){
        $(this).val($.fn.autoNumeric.Format($(this).attr('id'), $(this).val(), format_options));
    }   
});

});

Answer 3

autoNumeric does all formatting after 'onchange' event fires. So all that you need is to programmatically fire this event. Like this:

$('input.money').autoNumeric({aNeg: '-'}).trigger('change');

Hope this helps!

Answer 4

This is what I eventually did:

$(document).ready(function(){

$('input.auto').autoNumeric();

    $('input.auto').each(function(){
    var element = this
    if(element.value !=""){
        $('#'+element.id).val($.fn.autoNumeric.Format(element.id, element.value));
        }

    }

     );
});