Inconsistency between the masked value and the initial value

[FagnerMartinsBrack]

Check the fiddle below and:

1. Set the data to "R$500.00"
2. Click the button that simulates saving and retrieval of the unmasked value

What happens: The mask is set as "R$ 5.00"

What is expected: The mask should be "R$ 500.00"

Fiddle: http://jsfiddle.net/2kfzyb0b/1/

[FagnerMartinsBrack]

Probably related to https://github.com/plentz/jquery-maskmoney/issues/171, but I created a new topic to focus only in this issue instead.

[FagnerMartinsBrack]

In JS, parseFloat() strips all decimal zeroes:

$ parseFloat( 500.00 )
$ 500

My suggested solution would be not to rely in JS types, but return the stringified unmasked value according to the given precision:

http://jsfiddle.net/2kfzyb0b/2/

This also helps the user, he can parse to whatever type he wants without having to worry about treating text input in a format other than "string".

Something equivalent to:

element.maskMoney( "unmasked" )[ 0 ].toFixed( precision )

[jorool]

@plentz any news on this?

[danilor]

I am not sure if this will help anybody. But I solved it (kind of, not working with dynamic fields) this way:

$(".mask_money").each(function(index){
            var v = $(this).val();
            $(this).val(parseFloat(v));
            $(this).maskMoney({allowNegative: false, thousands:',', decimal:'.', affixesStay: true, precision:2}).maskMoney( "mask" ,parseFloat(v));
        });

I have everything in a function that I call everytime a new field is created.

function setUpMask(){
        $.jMaskGlobals = {
            maskElements: 'input,td,span,div',
        };
        $(".maskit").each(function(index){
            $(this).attr("type","text");
        });
        $(".mask_money").each(function(index){
            var v = $(this).val();
            $(this).val(parseFloat(v));
            $(this).maskMoney({allowNegative: false, thousands:',', decimal:'.', affixesStay: true, precision:2}).maskMoney( "mask" ,parseFloat(v));
        });
    }

[tumpalion]

@danilor, How do you call this function each time you create a new field?

[danilor]

@tumpalion Hi

It depends on now I am creating them.

For example: I have this code:

<a href='' class='addNewElement'>Add New</a>

<script type='text/javascript'>

$( document ).ready(function(){
   $('.addNewElement').click(function(e){
           // The code made to add new fields into the function
           setUpMask();
           e.preventDefault();
   });
});

</script>

Now, if you question is more oriented to how to add new fields, there are plenty of ways, but for example purposes you can do it this way:

$("#fatherElement").append('<input type="text" value="" id="" class="maskit" />');

I am not sure if that is the answer you are expecting.

[tumpalion]

@danilor, I tried your approach but it only returns 0.00, even when the field has a non-zero value.

[danilor]

@tumpalion Try to alert the v value inaide the each function. If it is empty or 0 then there is something wrong. That was my best approach and I have it working in a proyect that way.

The main difficulty is that we are not controlling what te user will input or load. So before masking it we should try to clean the value, that was why I used the parsefloat function.

[tumpalion]

@danilor , Ok. I main issue is this. When the info is read from the database and should on the text box it shows 7,000,000 but when I click on it, it shows J$ 700,000.00. So the correct info is going to the textbox, the issue is when the masking is being done.