1

Tengo 2 INPUT A y B, ambos reciben el resultado de una multiplicación entre X y Y y las sumatoria de N veces los inputs que el usuario desee agregar respectivamente.

Tengo este codigo.

function suma(){
var A = document.getElementById("total");
var B = document.getElementById("subTotal");

resultado = parseInt(A.value) - parseInt(B.value);
document.getElementById("resultado").innerHTML = resultado;
}

Que me suma perfectamente los inputs A y B para poder hallar C en un div pero siempre y cuando yo de click en alguno lo cual es correcto pero lo que yo busco es que se actualice de manera automática.
Dejo una imagen como referencia. introducir la descripción de la imagen aquí

Con este codigo hallo la sumatoria de B

$(document).ready(function(){
$(document).on('click', '#checkAll', function() {           
    $(".itemRow").prop("checked", this.checked);
}); 
$(document).on('click', '.itemRow', function() {    
    if ($('.itemRow:checked').length == $('.itemRow').length) {
        $('#checkAll').prop('checked', true);
    } else {
        $('#checkAll').prop('checked', false);
    }
});  
var count = $(".itemRow").length;
$(document).on('click', '#addRows', function() { 
    count++;
    var htmlRows = '';
    htmlRows += '<tr>';
    htmlRows += '<td style="text-align: center;"><input class="itemRow" type="checkbox"></td>';          
    htmlRows += '<td style="text-align: center;"><input type="text" name="productName[]" id="productName_'+count+'" class="form-control" autocomplete="off"></td>'; 
    htmlRows += '<td style="text-align: center;">S/. <input type="hidden" name="quantity[]" id="quantity_'+count+'" value="1" class="form-control quantity" autocomplete="off"></td>';          
    htmlRows += '<td style="text-align: center;"><input type="number" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off"><input type="hidden" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off"></td>';       
    htmlRows += '</tr>';
    $('#invoiceItem').append(htmlRows);
}); 
$(document).on('click', '#removeRows', function(){
    $(".itemRow:checked").each(function() {
        $(this).closest('tr').remove();
    });
    $('#checkAll').prop('checked', false);
    calculateTotal();
});     
$(document).on('blur', "[id^=quantity_]", function(){
    calculateTotal();
}); 
$(document).on('blur', "[id^=price_]", function(){
    calculateTotal();
}); 
$(document).on('blur', "#taxRate", function(){      
    calculateTotal();
}); 
$(document).on('blur', "#amountPaid", function(){
    var amountPaid = $(this).val();
    var totalAftertax = $('#totalAftertax').val();  
    if(amountPaid && totalAftertax) {
        totalAftertax = totalAftertax-amountPaid;           
        $('#amountDue').val(totalAftertax);
    } else {
        $('#amountDue').val(totalAftertax);
    }   
}); 
$(document).on('click', '.deleteInvoice', function(){
    var id = $(this).attr("id");
    if(confirm("")){
        $.ajax({
            url:"action.php",
            method:"POST",
            dataType: "json",
            data:{id:id, action:'delete_invoice'},              
            success:function(response) {
                if(response.status == 1) {
                    $('#'+id).closest("tr").remove();
                }
            }
        });
    } else {
        return false;
    }
});
}); 

function calculateTotal(){
    var totalAmount = 0; 
    $("[id^='price_']").each(function() {
        var id = $(this).attr('id');
        id = id.replace("price_",'');
        var price = $('#price_'+id).val();
        var quantity  = $('#quantity_'+id).val();
        if(!quantity) {
            quantity = 1;
        }
        var total = price*quantity;
        $('#total_'+id).val(parseFloat(total));
        totalAmount += total;           
    });
    $('#subTotal').val(parseFloat(totalAmount));    
    var taxRate = $("#taxRate").val();
    var subTotal = $('#subTotal').val();    
    if(subTotal) {
        var taxAmount = subTotal*taxRate/100;
        $('#taxAmount').val(taxAmount);
        subTotal = parseFloat(subTotal)+parseFloat(taxAmount);
        $('#totalAftertax').val(subTotal);      
        var amountPaid = $('#amountPaid').val();
        var totalAftertax = $('#totalAftertax').val();  
        if(amountPaid && totalAftertax) {
            totalAftertax = totalAftertax-amountPaid;           
            $('#amountDue').val(totalAftertax);
        } else {        
            $('#amountDue').val(subTotal);
        }
    }
}

Es un codigo que estoy reutilizando de un proyecto anterior.
Y este seria mi codigo html

<div class="col-6">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label for="codigo" class="col-sm-12 control-label">Nombre de Proveedor</label>
                                                                <div class="col-sm-12">
                                                                    <input type="text" class="form-control" id="nomProveedor" name="nomProveedor" required>
                                                                </div>
                                                            </div>
                                                        </div>  
                                                        <div class="col-12"style="padding-top: 7px;">
                                                            <div class="row">
                                                                <div class="col-6">
                                                                    <div class="form-group">
                                                                        <label for="codigo" class="col-sm-12 control-label">Peso de Materia Prima</label>
                                                                        <div class="col-sm-12 inputs">
                                                                            <input type="number" min="-999" max="999" id="x" class="inputs_valors_privisionales form-control" value="0" type="number">
                                                                        </div>
                                                                    </div>  
                                                                </div>      
                                                                <div class="col-6">
                                                                    <div class="form-group">
                                                                        <label for="codigo" class="col-sm-12 control-label">Precio</label>
                                                                        <div class="col-sm-12">
                                                                            <input type="number" min="-999" max="999" id="y" class="inputs_valors_privisionales form-control" value="0" type="number">
                                                                            
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>              
                                                </div>
                                                <div class="col-6">
                                                    <div class="row">
                                                        <table class="table table-hover" id="invoiceItem">  
                                                            <tr>
                                                                <th><center><input id="checkAll" class="formcontrol" type="checkbox"></center></th>
                                                                <th><center>Gastos a Pagar</center></th>
                                                                <th><center>Moneda</center></th>
                                                                <th><center>Monto Destinatario</center></th>    
                                                            </tr>                           
                                                            <tr>
                                                                <td><center><input class="itemRow" type="checkbox"></center></td>
                                                                <td><center><input type="text" name="productName[]" id="productName_1" class="form-control" autocomplete="off"></center></td>
                                                                <td><center>S/. <input type="hidden" name="quantity[]" id="quantity_1" value="1" class="form-control quantity" autocomplete="off"></center></td>
                                                                <td><center><input type="number" name="price[]" id="price_1" class="form-control price" autocomplete="off"><input type="hidden" name="total[]" id="total_1" class="form-control total" autocomplete="off"></center></td>
                                                            </tr>                       
                                                        </table>
                                                    </div>                                              
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <button class="btn btn-secondary delete" id="removeRows" type="button"><i class="fa fa-minus"></i> Borrar</button>
                                                            <button class="btn btn-primary" id="addRows" type="button"><i class="fa fa-plus"></i> Agregar Más</button>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="control-label float-right" style="padding-top: 9px;">Gastos Total</label>
                                                        </div>
                                                        <div class="col-md-3 float-right">
                                                            <div class="grupo">
                                                                <input value="" type="number" style="text-align: right;" class="inputs_valors_privisionales2 form-control" name="subTotal" id="subTotal" placeholder="Subtotal" readonly onblur="if(this.value == ''){this.value='0'}"   >
                                                                <input class="form-control inputs_valors_privisionales2" id="total"readonly onblur="if(this.value == ''){this.value='0'}" name="subTotal2">             
                                                                <input type="text" id="c" value="0">                                                                
                                                            </div>
                                                        </div>
                                                    </div>
9
  • ¿De manera automática cuando suceda qué? ¿Cuando cambie el contenido del <input> A o el del B? ¿Cuando cargue la página? El automático no existe en programación, todo atiende a acción/reacción.
    – phpMyGuel
    Commented el 20 jul. 2020 a las 12:32
  • phpMyGuel, gracias por responder tendre en cuenta lo ultimo que me dijiste. Quiero que se actualice cuando A y B resivan algun resultado sin que yo de clic en alguno de esos dos
    – KaoX
    Commented el 20 jul. 2020 a las 12:34
  • ¿Y cómo recibirían los input A y B dichos resultados? ¿Los introduce el propio usuario? ¿Llegan de una llamada AJAX y se rellenan desde Javascript...?
    – phpMyGuel
    Commented el 20 jul. 2020 a las 12:35
  • No, a y b solo resiven resultados de X*Y y la sumatoria de N respectivamente. El usuario solo llena los campos X, Y y N
    – KaoX
    Commented el 20 jul. 2020 a las 12:39
  • Entonces necesitas asignar un evento change sobre los <input> X e Y para que cuando el valor de estos cambie, actualizar A y B y lanzar el cálculo de C.
    – phpMyGuel
    Commented el 20 jul. 2020 a las 12:45

1 respuesta 1

0

En mis comentarios te trataba de explicar que hicieras algo similar a esto:

$(function () {
  //Asignamos los eventos change a los input Y y X 
  //que son los que lanzan todo el cálculo.
  $('#x').on('change', calculo);
  $('#y').on('change', calculo);
});

function calculo () {
  let x = $('#x');
  let y = $('#y');
  let a = $('#a');
  let b = $('#b');
  
  //Me invento las operaciones para calcular A y B, 
  //aquí tendrías tú que definir las que necesites.
  a.val(parseInt(x.val()) + 10);
  b.val(parseInt(y.val()) + 5);
  
  //Ahora que tenemos los input A y B rellenos podemos lanzar tu función suma
  //para rellenar C.
  suma();
}

function suma(){
  let a = $('#a');
  let b = $('#b');
  let c = $('#c');
  let resultado = parseInt(a.val()) - parseInt(b.val());
  
  c.val(resultado);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>X: </label>
<input type="text" id="x" value="0">
<label>Y: </label>
<input type="text" id="y" value="0">
<br>
<br>
<label>A: </label>
<input type="text" id="a" value="0">
<label>B: </label>
<input type="text" id="b" value="0">
<label>C: </label>
<input type="text" id="c" value="0">

Haciendo que el cálculo de C se haga en la misma función que el cálculo de A y B conseguirías que todo el proceso se ejecutase cuando X o Y cambien.

3
  • phpMyGuel, aplique tu ejemplo a lo que quiero hacer y este fue el resultado prnt.sc/tl97v5
    – KaoX
    Commented el 20 jul. 2020 a las 13:27
  • El NaN lo obtienes porque seguramente la operación para obtener el valor de C no esté realizada correctamente. Lo mejor que puedes hacer es seguir la recomendación de @Fernando Carrascosa y que subas el código con el que obtienes el contenido de X, Y y N para calcular y actualizar los campos A y B. De esa manera podremos ver donde estás teniendo el problema.
    – phpMyGuel
    Commented el 20 jul. 2020 a las 13:32
  • phpMyGuel edite la pregunta, espero puedas ayudarme.
    – KaoX
    Commented el 20 jul. 2020 a las 13:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.