1

Tengo dos campos que tienen el atributo readonly, estos campos se actualizan automáticamente con el resultado de operaciones de otros campos, hasta ahí todo bien, el asunto es que necesito que esos tres campos se resten entre si, y el resultado se muestre en un cuarto campo y mi problema radica en que no puedo usar los eventos onchange o keyup porque estos campos son readonly.

Los campos Salario y SalarioConyuge se suman en un TotalIngreso (ReadOnly)

Arriendo y Creditos se suman en TotalGastos (Readonly)

Estos mismos se muestran en la parte final a manera de resumen llamada balance (TotalIngresosF y TotalGastosF) y son readonly tambien

Estos dos se deben restar y mostrarse en BalanceF (readonly)

		$(".Ingresos").keyup(function() {
			var ingreso_total = 0
		  	$(".Ingresos").each(
		    	function(index, value) {
		      		if ( $.isNumeric( $(this).val() ) ){
		      			ingreso_total  = ingreso_total + eval($(this).val());
		      		}
				}
			);
      		$("#TotalIngresos").val(ingreso_total);
      		$("#TotalIngresosF").val(ingreso_total);
		});
		
		$(".Gastos").keyup(function() {
			var ingreso_total = 0
		  	$(".Gastos").each(
		    	function(index, value) {
		      		if ( $.isNumeric( $(this).val() ) ){
		      			ingreso_total  = ingreso_total + eval($(this).val());
		      		}
				}
			);
      		$("#TotalGastos").val(ingreso_total);
      		$("#TotalGastosF").val(ingreso_total);
		});	

	

$("#TotalIngresosF").keyup(function() {
			var TotalIngresosF = Number($("#TotalIngresosF").val()); 
			var TotalGastosF = Number($("#TotalGastosF").val());
		
			var CalculoBalanceF = TotalIngresosF - TotalGastosF;
			var BalanceF = $("#BalanceF").val(CalculoBalanceF); 			
			
		});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group calculadora">
									    <label for="Salario" class="col-sm-5 control-label">Salario</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Ingresos" id="Salario" placeholder="123.456">
									    </div>
									  </div>
									  <div class="form-group calculadora">
									    <label for="SalarioConyuge" class="col-sm-5 control-label">Salario Conyuge</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Ingresos" id="SalarioConyuge" placeholder="123.456">
									    </div>
									  </div>
									  <div class="form-group calculadora">
									    <label for="TotalIngresos" class="col-sm-5 control-label">Total de Ingresos</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control" id="TotalIngresos" placeholder="0" readonly>
									    </div>
									  </div>
<div class="form-group calculadora">
									    <label for="Arriendo" class="col-sm-5 control-label">Arriendo</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Gastos" id="Arriendo" placeholder="123.456">
									    </div>
									  </div>
									  <div class="form-group calculadora">
									    <label for="Creditos" class="col-sm-5 control-label">Creditos</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Gastos" id="Creditos" placeholder="123.456">
									    </div>

<div class="form-group calculadora">
									    <label for="TotalIngresos" class="col-sm-5 control-label">Total de Gastos</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control" id="TotalGastos" placeholder="0" readonly>
									    </div>
									  </div>
<div class="form-group calculadora">
  <label for="TotalIngresosF" class="col-sm-5 control-label">Total Ingresos</label>
  <div class="col-sm-7">
    <input type="text" class="form-control Balance" id="TotalIngresosF" readonly>
  </div>
</div>
<div class="form-group calculadora">
  <label for="TotalGastosF" class="col-sm-5 control-label">Total Gastos</label>
  <div class="col-sm-7">
    <input type="text" class="form-control Balance" id="TotalGastosF" readonly>
  </div>
</div>							
<div class="form-group calculadora">
  <label for="BalanceF" class="col-sm-5 control-label">Balance Final</label>
  <div class="col-sm-7">
    <input type="text" class="form-control Balance" id="BalanceF" readonly>
  </div>
</div>

4
  • Crea una función para realizar los cálculos necesarios y ejecútala cada que actualices alguno de estos campos.
    – Triby
    el 21 abr. 2020 a las 19:22
  • Gracias Triby, pero podrías ser un poco mas especifico. Soy neófito en este tema del Jquery, que evento podría usar par que se ejecute de esa manera. Gracias
    – McGus007
    el 21 abr. 2020 a las 19:38
  • Más bien, tú eres quien debe ser más específico, edita tu pregunta y agrega el código con el que actualizas el valor de los campos con readonly, porque a ciegas va a ser difícil sugerir algo.
    – Triby
    el 21 abr. 2020 a las 19:40
  • Tienes razon! ya agrego el código
    – McGus007
    el 21 abr. 2020 a las 19:46

1 respuesta 1

0

Como te decía en el comentario, solo crea una función para actualizar totales calculaTotales() y ejecútala después de realizar los cálculos al modificar ingresos y egresos.

$(".Ingresos").keyup(function() {
    var ingreso_total = 0
    $(".Ingresos").each(
        function(index, value) {
            if ( $.isNumeric( $(this).val() ) ){
                ingreso_total  = ingreso_total + eval($(this).val());
            }
        }
    );
    $("#TotalIngresos").val(ingreso_total);
    $("#TotalIngresosF").val(ingreso_total);
    // Ejecuta la función para actualizar totales
    calculaTotales();
});
		
$(".Gastos").keyup(function() {
    var ingreso_total = 0
    $(".Gastos").each(
        function(index, value) {
            if ( $.isNumeric( $(this).val() ) ){
                ingreso_total  = ingreso_total + eval($(this).val());
            }
        }
    );
    $("#TotalGastos").val(ingreso_total);
    $("#TotalGastosF").val(ingreso_total);
    // Ejecuta la función para actualizar totales
    calculaTotales();
});	

	
// Actualizar totales
function calculaTotales() {
    var TotalIngresosF = Number($("#TotalIngresosF").val()); 
    var TotalGastosF = Number($("#TotalGastosF").val());
		
    var CalculoBalanceF = TotalIngresosF - TotalGastosF;
    var BalanceF = $("#BalanceF").val(CalculoBalanceF); 			
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group calculadora">
									    <label for="Salario" class="col-sm-5 control-label">Salario</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Ingresos" id="Salario" placeholder="123.456">
									    </div>
									  </div>
									  <div class="form-group calculadora">
									    <label for="SalarioConyuge" class="col-sm-5 control-label">Salario Conyuge</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Ingresos" id="SalarioConyuge" placeholder="123.456">
									    </div>
									  </div>
									  <div class="form-group calculadora">
									    <label for="TotalIngresos" class="col-sm-5 control-label">Total de Ingresos</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control" id="TotalIngresos" placeholder="0" readonly>
									    </div>
									  </div>
<div class="form-group calculadora">
									    <label for="Arriendo" class="col-sm-5 control-label">Arriendo</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Gastos" id="Arriendo" placeholder="123.456">
									    </div>
									  </div>
									  <div class="form-group calculadora">
									    <label for="Creditos" class="col-sm-5 control-label">Creditos</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control Gastos" id="Creditos" placeholder="123.456">
									    </div>

<div class="form-group calculadora">
									    <label for="TotalIngresos" class="col-sm-5 control-label">Total de Gastos</label>
									    <div class="col-sm-7">
									      <input type="text" class="form-control" id="TotalGastos" placeholder="0" readonly>
									    </div>
									  </div>
<div class="form-group calculadora">
  <label for="TotalIngresosF" class="col-sm-5 control-label">Total Ingresos</label>
  <div class="col-sm-7">
    <input type="text" class="form-control Balance" id="TotalIngresosF" readonly>
  </div>
</div>
<div class="form-group calculadora">
  <label for="TotalGastosF" class="col-sm-5 control-label">Total Gastos</label>
  <div class="col-sm-7">
    <input type="text" class="form-control Balance" id="TotalGastosF" readonly>
  </div>
</div>							
<div class="form-group calculadora">
  <label for="BalanceF" class="col-sm-5 control-label">Balance Final</label>
  <div class="col-sm-7">
    <input type="text" class="form-control Balance" id="BalanceF" readonly>
  </div>
</div>

1
  • Muchas gracias Triby
    – McGus007
    el 21 abr. 2020 a las 20:12

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.