How to make Maskmoney correctly load value in input when entering page

Asked

Viewed 1,086 times

1

I am trying unsuccessfully to make Maskmoney load the format value when entering the page, I know there is a link right here in the OS with a similar question, but even with the example I am not getting.

The value in my comic book is recorded like this:

inserir a descrição da imagem aqui

In the bank the field is defined thus:

inserir a descrição da imagem aqui

My input is like this:

<input type="text" id="UpUltimoSalario" name="UpUltimoSalario" value="" class="form-control" >

And what I’ve tried so far:

// MÁSCARA PARA VALORES
$(function() {
  var maxLength = '-0.000.000,00'.length;
  $("#UpUltimoSalario").maskMoney({
     // allowNegative: true,
     decimal: ',',
     thousands: '.',
     affixesStay: false
  })
      .attr('maxlength', maxLength).trigger('mask.maskMoney');
});

When I open my modal the value is like this:

inserir a descrição da imagem aqui

Clicking on the input looks like this:

inserir a descrição da imagem aqui

Inserting value returned in Modal:

// INSERINDO REGISTROS NA MODAL - ALTERAÇÃO
function Alteracao(Historico) {
    $.post("pDetalhesHistoricoProfissional-2-bkp.php", {
            Historico: Historico
        },
        function (data, status) {
            // PARSE json data
            var dados = JSON.parse(data);   
                // CHAVES PARA ALTERAÇÃO
                $("#IdHistorico").val(dados.IdHistorico);   
                $("#IdCandidato").val(dados.IdCandidato);
                // CARREGA VALORES NA MODAL
                $("#UpEmpresa").val(dados.Empresa);
                $("#UpCargo").val(dados.Cargo);
                $("#UpDataEntrada").val(dados.DataEntrada);
                $("#UpDataSaida").val(dados.DataSaida);
                $("#UpUltimoSalario").val(dados.UltimoSalario);
                $("#UpAtividades").val(dados.Atividades);   
            }
    );
    // ABRE MODAL PARA ALTERAÇÃO
    $("#ModalAlteracao").modal("show");
}
  • 1

    When pulling the value of the bank, it makes 2 Replaces: the first taking out all the points, and the second replacing the comma with a point. This in the back-end.

  • If the problem is with Maskmoney, which is in Javascript, the problem can and should be reduced to a [mcve] that does not depend on PHP. You can just cite that the value that arrived from the database was X and from that mount the problem only with the JS. The entire PHP snippet of the question is unrelated to the problem and is only polluting your question.

1 answer

1


Hello, you might want to work with another library.

UPDATE
Added example with library MaskMoney

example jsfiddle

$(function () {
	console.log('init app');
	$('#UpUltimoSalario').val('3.555,00');
	$('#mask').val('3.555,00');

	$('#btn-modal-maskmoney').click(function () {
		showModel();
	});

	initMaskMoney();
	setMask();

});

function initMaskMoney() {
	$("#UpUltimoSalario").maskMoney({
		showSymbol: true,
		symbol: "R$",
		decimal: ",",
		thousands: ".",
		affixesStay: false
	});
}

function setMask() {
	$('.money').mask('#.##0,00', {
		reverse: true,
		maxlength: false
	});
}

function showModel() {
	let modal = $('#modal-maskmoney');

	modal.on('shown.bs.modal', function () {
		$(this).find('input:visible:first').focus();
	});

	modal.modal('show');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-xs-12 form-group">
         <button type="button" id="btn-modal-maskmoney" class="btn btn-primary btn-lg">
         Click Me
         </button>
      </div>
   </div>
   <div class="row">
      <div class="col-xs-12">
         <label>Mask</label>
         <input type="text" id="mask" class="form-control money" >
      </div>
   </div>
</div>
<!-- The modal -->
<div class="modal fade" id="modal-maskmoney" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Mask-Money</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <input type="text" id="UpUltimoSalario" name="UpUltimoSalario" value="" class="form-control money" >
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

  • I appreciate the @Wagner Filho collaboration, but I wouldn’t want to use another library.

  • @adventistapr, updated the issue.

  • Thanks Wagner Son, you helped too much.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.