Pass input values to PHP

Question

I have two inputs, one filled automatically by a PHP script, and the other the user enters the value, and a third input to calculate the subtraction or addition of the first two inputs.

I created the following topics:

Sum values of two inputs and show in third

https://forum.imasters.com.br/topic/559242-somar-valores-de-dois-inputs-e-mostrar-terceiro/#comment-2231252

These two topics I created to try to perform the direct calculation with jquery. But I ended up seeing that the values passed by PHP, from the first input, are interfering with the calculation with jQuery. When I gave alert in the first input it returned a written Alert: 'Undefined'

So I thought to pass the values of the two inputs to a PHP script and perform the calculation there, and then show the result in a DIV turret

But with the jQuery code I put together I’m not getting past the values, someone could help me?

I’ve already researched and found an article about:

Pass Jquery variable to PHP

But I couldn’t fix it.

With the code I made, I wanted the php var_dump to appear in the third input.

This is what HTML looks like:

<div class="form-group" id="formvalor">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Valor <small>(R$) </small><span class="required">*</span></label>
  <div class="col-md-3 col-sm-3 col-xs-12" id="valor_total">
    <input type="text" class="form-control col-md-7 col-xs-12 decimal" name="valor" id="valor" value="10" readonly><br>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Entrada <small>(R$) </small><span class="required">*</span></label>
  <div class="col-md-3 col-sm-3 col-xs-12" id="valEntrada">
    <input type="text" class="form-control col-md-7 col-xs-12 decimal" name="entrada" id="entrada" value="0"><br>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Saldo <small>(R$) </small><span class="required">*</span></label>
  <div class="col-md-3 col-sm-3 col-xs-12" id="saldo_total">
    <input type="text" class="form-control col-md-7 col-xs-12 decimal" name="saldo" id="saldo" value="" readonly>
  </div>
</div>

The jQuery to pass the values (It can be both GET with POST, for me it makes no difference):

    $("#entrada").change(function(){
  $.post("saldo_total.php",
  {entrada:''+$("#entrada").val()+'', valor:''+$("#valor").val()+''},
  function(valor){
    $("#saldo").html(valor);
  });
});

And PHP: var_dump($_POST);

This was the solution I found to perform the calculation, but if anyone knows of another where I can perform the calculation without PHP values interfering with jQuery they can say.

Could someone help me?

---------------- EDITION ----------------

Now jQuery is like this:

$("#entrada").change(function(){
    $.post("saldo_total.php",
    {entrada:''+$("#entrada").val()+'', valor:''+$("#valor").val()+''},
        function(valor){
            $("#saldo").val(valor);
        });
});

And PHP:

print_r($_POST);

And with that, in the input, appears the $_POST array like this:

Array( [entrada]=>50 [valor]=>undefined )

Answer 1

I would do with javascript this way passing by putting the onchange in the input:

<input type="text" class="form-control col-md-7 col-xs-12 decimal" name="entrada" id="entrada" value="0" onchange="MUDAVALOR(this.id)">

and in the javascript function:

<script>
function MUDAVALOR(id) {
    var entrada = document.getElementById(id).value;
    var valor = document.getElementById('valor').value;
    entrada = entrada.replace(/\./g,'');
    entrada = entrada.replace(',','.');
    entrada = new Number(entrada);
    valor = valor.replace(/\./g,'');
    valor = valor.replace(',','.');
    valor = new Number(valor);  
    var total = valor + entrada;
    total = total.toFixed(2);
    document.getElementById('saldo').value = total;
}

</script>

Answer 2

This probably solves your problem, check what is passed as input value valor by his code php.

(($) => {

  let correctValue = (elementId) => {
    //Javascript não reconhece valores com ',' como floats
    let elem = $('#' + elementId);
    elem.val(elem.val().replace(',', '.'));

  }

  $(document).ready(() => {
    correctValue('valor');

    $('#entrada').on('input', function() {
      correctValue('entrada');

      let valor = parseFloat($('#valor').val()),
        entrada = parseFloat($('#entrada').val()) || 0;

      $('#saldo').val(valor + entrada);

    })
    
  })

})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="formvalor">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Valor <small>(R$) </small><span class="required">*</span></label>
  <div class="col-md-3 col-sm-3 col-xs-12" id="valor_total">
    <input type="text" class="form-control col-md-7 col-xs-12 decimal" name="valor" id="valor" value="10" readonly><br>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Entrada <small>(R$) </small><span class="required">*</span></label>
  <div class="col-md-3 col-sm-3 col-xs-12" id="valEntrada">
    <input type="text" class="form-control col-md-7 col-xs-12 decimal" name="entrada" id="entrada" value="0"><br>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Saldo <small>(R$) </small><span class="required">*</span></label>
  <div class="col-md-3 col-sm-3 col-xs-12" id="saldo_total">
    <input type="text" class="form-control col-md-7 col-xs-12 decimal" name="saldo" id="saldo" value="" readonly>
  </div>
</div>