Pass input values to PHP

Navigation
0

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

I created the following topics:

Adding values from two inputs and showing third

link

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, of the first input , are interfering with the calculation with jQuery. When I gave alert in the first input it would return a written alert: ' undefined '

Then I thought of passing the values of the two inputs to a PHP script and performing the calculation there, and then showing the result in a third DIV

But with the jQuery code I set up I am not able to pass the values, could anyone help me?

I already researched and also found an article on:

Pass Jquery variable to PHP

But I could not solve it.

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

The HTML was thus: 

<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 (Can be both GET and 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 in which I can perform the calculation without the PHP values interfere with jQuery can say.

Could anyone help me?

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

Now jQuery looks 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, the $ _POST array looks like this: 

Array( [entrada]=>50 [valor]=>undefined )
    
asked by anonymous 13.06.2017 / 17:41

2 answers

0

I would javascript this way by passing the onchange into 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>
    
13.06.2017 / 19:41
0

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

(($) => {

  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><divclass="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>
    
13.06.2017 / 21:43
Laravel - Question about localStorage Date and time of modification of files to download a site in wordPress