CODEWITHSUNDEEP
javascriptphpjquery
Ramesh Singh
Ramesh Singh

Reputation: 98

mask money not working on dynamically added inputs

i'm using jquery.maskMoney.js to add mask to the input it works for the normal input..but it's not working for the dynamically added input. here's the code which i'm using

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ 
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    $('input[id^="demo"]').each(function () {
    $(this).maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true}); 
});


<div class="input_fields_wrap">
  <button class="add_field_button">Add More Fields</button>
  <div><input type="text" name="mytext[]" id="demo[1]"></div>
</div>

kindly help i'm stuck

Upvotes: 0

Views: 6661

Answers (4)

Marcelo Chumer
Marcelo Chumer

Reputation: 81

You can trigger the formating using .trigger('mask.maskMoney').

    $("#budget_prevision").maskMoney({
        prefix:'R$ ', 
        allowNegative: false, 
        thousands:'.', 
        decimal:',', 
        affixesStay: false          
    }).trigger('mask.maskMoney');

Upvotes: 0

fdyahk
fdyahk

Reputation: 45

Add on focus on a field call function :

getDecimal2()
{

    $("#eupdate_property_luasNet").maskMoney();

}

Upvotes: 0

Ugur
Ugur

Reputation: 1729

You can change your javascript that way. See the initMaskMoney(), it's called both after page load and after text field addition. Also you don't need to iterate each element, you can use selectors select all at once. 

<script type="text/javascript">
$(document).ready(function() {
     var max_fields      = 10; //maximum input boxes allowed
     var wrapper         = $(".input_fields_wrap"); //Fields wrapper
     var add_button      = $(".add_field_button"); //Add button ID
     var x = 1; //initlal text box count
     $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
         if(x < max_fields){ 
             x++; //text box increment
             $(wrapper).append('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>');
             //re-init mask money to apply new added input 
             initMaskMoney();
         }
    });
     initMaskMoney();

});

function initMaskMoney() {
    $('input[id^="demo"]').maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true}); 
}

</script>

Update After seeing @Dekel's answer I think this version is more convenient. initMaskMoney gets a parameter called selector. With the help of this parameter you can init maskmoney for current items and for only new added input only (in the previous answer all input boxes were initing MaskMoney again).

<script type="text/javascript">
$(document).ready(function() {
     var max_fields      = 10; //maximum input boxes allowed
     var wrapper         = $(".input_fields_wrap"); //Fields wrapper
     var add_button      = $(".add_field_button"); //Add button ID
     var x = 1; //initlal text box count
     $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ 
             x++; //text box increment
             var newItem =  $('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>')
             $(wrapper).append(newItem); //add input box
             //init mask money for only added input
             initMaskMoney($(newItem).find('input'));
         }
    });

    //init mask money for current inputs
    initMaskMoney('input[id^="demo"]');

});

function initMaskMoney(selector) {
    $(selector).maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true}); 
}

</script>

Upvotes: 1

Dekel
Dekel

Reputation: 62556

Your selector $('input[id^="demo"]').each will work on any existing elements, but will not work on new created elements. Your problem is that when you click on the button - you append new elements to the document, and on those elements you didn't initiate the .hasMoney plugin.
What you can do is after you append the new <input to your document - call the .hasMoney on that element.

You might wanna change a bit your code:

i = $('<div><input type="text" name="mytext[]" id="demo['+x+']" /><a href="#" class="remove_field">Remove</a></div>')
$(wrapper).append(i); //add input box
i.find('input').maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});

Upvotes: 1

Related Questions