real currency mask in jquery php array

Question

real currency mask in jquery php array

Navigation

#1 by (1 votes)
#2 by (1 votes)

-1

I have a field to insert a monetary value into an array but the mask only works on the first input, when I add new line the mask does not work.

In this line $ ("# finTpVal"). maskMoney ({symbol: 'R $', already tested with id and input class ...

The code:

<script type="text/javascript" src="jquery.min.224.js"></script>
<script type="text/javascript" src="jquery.mask.money.js"></script>

<table border="0" cellspacing="0" cellpadding="0" id="table-data">
   <tr>
      <td height="25" align="center" valign="middle">Tipo</td>
      <td height="25" align="center" valign="middle">Valor</td>
      <td height="25" align="center" valign="middle">&nbsp;</td>
      <td height="25" align="center" valign="middle">&nbsp;</td>
   </tr>
   <tr class="tr_clone">
      <td height="30" align="center" valign="middle">
      <select name="tipo[]" id="tipo>
      <option value="">-</option>
      <option value="1">Tipo 1</option>
      <option value="2">Tipo 2</option>    
      </select>
      </td>
      <td height="30" align="center" valign="middle">       
      <input type="text" name="valor[]" id="valor" class="maskreal" value="">
      </td>
      <td height="30" align="center" valign="middle">
      <span class="tr_clone_add" style="cursor:pointer;" title="Adicionar">
      +</span>
      </td>
      <td height="30" align="center" valign="middle">
      <span class="tr_clone_del" style="cursor:pointer;" title="Apagar">
      -</span>
      </td>
   </tr>
</table>

<script>
(function($) {
  $(function() {
      $("#finTpVal").maskMoney({symbol:'R$ ', 
        showSymbol:true, 
        thousands:'.', 
        decimal:',', 
        symbolStay: true
    });      

      var table = $('#table-data');
      table.on('click','.tr_clone_add', function(e) {
          e.preventDefault();
          var thisRow = $(this).closest('tr');
          var clone   = thisRow.clone();
          clone.find('#finTpVal').val('');
          thisRow.after(clone);
          return false;
      });
      table.on('click','.tr_clone_del', function(e) {
          e.preventDefault();
          if ($('.tr_clone').length > 1) {
              var thisRow = $(this).closest("tr");
              thisRow.remove();
          }
          return false;
      });
  });
})(jQuery);
</script>

html jquery

asked by anonymous 30.07.2018 / 19:51

2 answers

1

You need to call the .maskMoney method again, you can create a method that calls that other method and inside it set all your masks, and whenever you add a new field, just call UpdateMasks follows the code example:

function UpdateMasks()
{
     $("#finTpVal").maskMoney({symbol:'R$ ', 
         showSymbol:true, 
         thousands:'.', 
         decimal:',', 
         symbolStay: true
     });
}

Within the event that is called when tr_clone_add is clicked you can call the configured function UpdateMasks .

  table.on('click','.tr_clone_add', function(e) {
      e.preventDefault();
      var thisRow = $(this).closest('tr');
      var clone   = thisRow.clone();
      clone.find('#finTpVal').val('');
      thisRow.after(clone);
      UpdateMasks();//atualizando as mascaras.
      return false;
  });

30.07.2018 / 20:06

NullPointerException I do not know how to solve REACT-NATIVE ERROR

score 1 · Accepted Answer

As I put it in the comment, you need to rerun .maskMoney so that the cloned element also works.

Here's an example (I used the class so I did not need to refer to the ID, and I also put the options in a variable to avoid duplicating the code):

var ops = {symbol:'R$ ', 
        showSymbol:true, 
        thousands:'.', 
        decimal:',', 
        symbolStay: true
    }
$(".maskreal").maskMoney(ops);      

      var table = $('#table-data');
      table.on('click','.tr_clone_add', function(e) {
          e.preventDefault();
          var thisRow = $(this).closest('tr');
          var clone   = thisRow.clone();
          clone.find('#finTpVal').val('');
          thisRow.after(clone);

          $(".maskreal").maskMoney(ops);  
          return false;
      });
      table.on('click','.tr_clone_del', function(e) {
          e.preventDefault();
          if ($('.tr_clone').length > 1) {
              var thisRow = $(this).closest("tr");
              thisRow.remove();
          }
          return false;
      });

See the working example here: link