Add two input and subtract the total with jquery

1

I have a window for the shopping cart with two input, one where I write the total charged with a credit or debit card, and another for cash payment. It happens that the customer in a purchase can use both methods at the same time. So I want that when writing in either of the two automatically adds to the other if it is different from empty. But at the same time I want the sum to be subtracted from the total of the invoice and to show the return, let's say (what you have to give the client) in another input.

I did the following but it does not work:

$("#efectivo").keyup(function(){
    efectivo=$("#efectivo").val();
 if (efectivo===""){ 
     if ($("#Tarjeta").val()!==""){
    tarjeta = $("#Tarjeta").val();
    vuelto = parseFloat(total) - parseFloat(tarjeta);
    $("#Vuelto").val(vuelto);
    }
    }else
    
   if ($("#efectivo").val!==""){ 
   
            if (total!==0){
    
             var efectivo = $("#efectivo").val();
            if ($("#Tarjeta").val()!==""){
        
                    tarjeta = $("#Tarjeta").val();
    
                                        }
                    var entrego = parseFloat(efectivo) + parseFloat(tarjeta);
    
                    vuelto = parseFloat(total) - parseFloat(entrego);

                    $("#Vuelto").val(vuelto);
                            }
   
   }
    
});

$("#Tarjeta").keyup(function(){
    tarjeta=$("#Tarjeta").val();
 if (tarjeta===""){ 
     if ($("#efectivo").val()!==""){
    efectivo = $("#efectivo").val();
    vuelto = parseFloat(total) - parseFloat(efectivo);
    $("#Vuelto").val(vuelto);
    }
    }else
    
   if ($("#Tarjeta").val!==""){ 
   
            if (total!==0){
    
             var tarjeta = $("#Tarjeta").val();
            if ($("#efectivo").val()!==""){
        
                    efectivo = $("#efectivo").val();
    
                                        }
                    var entrego = parseFloat(efectivo) + parseFloat(tarjeta);
    
                    vuelto = parseFloat(total) - parseFloat(entrego);

                    $("#Vuelto").val(vuelto);
                            }
   
   }
    

});

Any suggestions? This is the html of the fields:

<div class="row">


<label  class="col-sm-2 control-label">Contado/Efectivo</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" id="efectivo" placeholder="Dinero en efectivo"/>
    </div>
    </div>
    <div class="row">
    <label class="col-sm-2 control-label">Efectivo Banco</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" id="Tarjeta" placeholder="Tarjeta"/>
    </div>
    </div>
    <div class="row">
       <label class="col-sm-2 control-label">Vuelto</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" id="Vuelto" placeholder="Vuelto"/>
    </div>

</div>
    
asked by Caruso 13.09.2018 в 20:33
source

1 answer

1

If you initialize your variables, your code, although it is not optimal, works:

var total = 264;
var efectivo = 0;
var tarjeta = 0;
$("#efectivo").keyup(function(){
    efectivo=$("#efectivo").val();
 if (efectivo===""){ 
     if ($("#Tarjeta").val()!=""){
      tarjeta = $("#Tarjeta").val();
      vuelto = parseFloat(total) - parseFloat(tarjeta);
      $("#Vuelto").val(vuelto);
    }
 }else
    
   if ($("#efectivo").val!==""){ 
   
            if (total!==0){
    
             var efectivo = $("#efectivo").val();
            if ($("#Tarjeta").val()!=""){
          
                    tarjeta = $("#Tarjeta").val();
                    console.log(tarjeta);
                                        }
                    var entrego = parseFloat(efectivo) + parseFloat(tarjeta);
    
                    vuelto = parseFloat(total) - parseFloat(entrego);

                    $("#Vuelto").val(vuelto);
                            }
   
   }
    
});

$("#Tarjeta").keyup(function(){
    tarjeta=$("#Tarjeta").val();
 if (tarjeta===""){ 
     if ($("#efectivo").val()!==""){
    efectivo = $("#efectivo").val();
    vuelto = parseFloat(total) - parseFloat(efectivo);
    $("#Vuelto").val(vuelto);
    }
    }else
    
   if ($("#Tarjeta").val!==""){ 
   
            if (total!==0){
    
             var tarjeta = $("#Tarjeta").val();
            if ($("#efectivo").val()!==""){
        
                    efectivo = $("#efectivo").val();
    
                                        }
                    var entrego = parseFloat(efectivo) + parseFloat(tarjeta);
    
                    vuelto = parseFloat(total) - parseFloat(entrego);

                    $("#Vuelto").val(vuelto);
                            }
   
   }
    

});
<div class="row">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label  class="col-sm-2 control-label">Contado/Efectivo</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" id="efectivo" placeholder="Dinero en efectivo"/>
    </div>
    </div>
    <div class="row">
    <label class="col-sm-2 control-label">Efectivo Banco</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" id="Tarjeta" placeholder="Tarjeta"/>
    </div>
    </div>
    <div class="row">
       <label class="col-sm-2 control-label">Vuelto</label>
    <div class="col-sm-3">
      <input type="text" class="form-control" id="Vuelto" placeholder="Vuelto"/>
    </div>

</div>
    
answered by 13.09.2018 / 20:46
source