2

Tengo este script, que me permite sumar números en tiempo real:

function operacion() {
  caja = document.forms["sumar"].elements;
  var numero1 = Number(caja["cantidad"].value);
  var numero2 = Number(caja["costo"].value);
  var numero3 = Number(caja["monto_pagar"].value);
  var numero4 = Number(caja["descuento"].value);
  resultado = (numero1 * numero2);
  var desc = (numero1 * numero2) * numero4 / 100;
  caja["saldo_pagar"].value = (resultado - numero3) - desc;
  if (!isNaN(resultado)) {
    var descuento = (numero1 * numero2) * numero4 / 100;
    caja["total"].value = (numero1 * numero2) - descuento;
  }
}
<form name="sumar">
  <label>Cantidad</label>
  <input type="text" name="cantidad" placeholder="Cantidad" onKeyUp="operacion()">
  <br>
  <label>Costo</label>
  <input type="text" name="costo" placeholder="Costo" onKeyUp="operacion()">
  <br>
  <label>Monto a pagar</label>
  <input type="text" class="form-control" name="monto_pagar" placeholder="Monto a pagar" onKeyUp="operacion()">
  <br>
  <label>Descuento</label>
  <input type="text" name="descuento" placeholder="Monto a pagar" onKeyUp="operacion()">
  <br>
  <label>SALDO</label>
  <input type="text" name="saldo_pagar">
  <br>
  <label>TOTAL</label>
  <input type="text" name="total">
</form>

Y funciona perfectamente. Pero tengo ahora tengo el monto a pagar en un select, y tengo problemas al realizar esta operación.

function operacion() {
  caja = document.forms["sumar"].elements;
  var numero1 = Number(caja["cantidad"].value);
  var numero2 = Number(caja["costo"].value);
  var numero3 = Number(caja["monto_pagar"].value);
  var numero4 = Number(caja["descuento"].value);
  resultado = (numero1 * numero2);
  var desc = (numero1 * numero2) * numero4 / 100;
  caja["saldo_pagar"].value = (resultado - numero3) - desc;
  if (!isNaN(resultado)) {
    var descuento = (numero1 * numero2) * numero4 / 100;
    caja["total"].value = (numero1 * numero2) - descuento;
  }
}
<form name="sumar">
  <label>Cantidad</label>
  <input type="text" name="cantidad" placeholder="Cantidad" onKeyUp="operacion()">
  <br>
  <label>Monto a pagar</label>
  <input type="text" name="monto_pagar" placeholder="Monto a pagar" onKeyUp="operacion()"> <br>
  <label>Costo</label>
  <select name="costo" onchange="operacion()">
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
  <br> <label>Descuento</label>
  <input type="text" name="descuento" placeholder="Monto a pagar" onKeyUp="operacion()">
  <br>
  <label>SALDO</label>
  <input type="text" name="saldo_pagar">
  <br>
  <label>TOTAL</label>
  <input type="text" name="total">
</form>

2 respuestas 2

3

El código que presento es una variación del código de la pregunta, tiene que tener todos los campos llenos y funcionaria en tiempo real, usando los eventos de change para el select, y .on para los campos.

var numero3, numero1, numero2, numero4;
caja = document.forms["sumar"].elements;
$(".monto_pagar").change(function() {
  numero3 = caja["monto_pagar"].value;
  mostrar();
});

$("#cantidad").on("input", function() {
  numero1 = Number(caja["cantidad"].value);
  mostrar();
});

$("#costo").on("input", function() {
  numero2 = Number(caja["costo"].value);
  mostrar();
});
$("#descuento").on("input", function() {
  numero4 = Number(caja["descuento"].value);
  mostrar();
});

function mostrar() {
  if (numero1 >= 0 && numero2 >= 0 && numero3 >= 0 && numero4 >= 0) {
    resultado = (numero1 * numero2);
    var desc = (numero1 * numero2) * numero4 / 100;
    caja["saldo_pagar"].value = (resultado - numero3) - desc;
    if (!isNaN(resultado)) {
      var descuento = (numero1 * numero2) * numero4 / 100;
      caja["total"].value = (numero1 * numero2) - descuento;
    }
  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="sumar">
  <label>Cantidad</label>
  <input type="text" name="cantidad" placeholder="Cantidad" id="cantidad">
  <br>
  <label>Costo</label>
  <input type="text" name="costo" placeholder="Costo" id="costo"> <br>
  <label>Monto a pagar</label>
  <select name="monto_pagar" class="monto_pagar">
<option selected="true" disabled="disabled">seleccione el monto</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
  <br> <label>Descuento</label>
  <input type="text" name="descuento" id="descuento" placeholder="Monto a pagar">
  <br>
  <label>SALDO</label>
  <input type="text" name="saldo_pagar">
  <br>
  <label>TOTAL</label>
  <input type="text" name="total">
</form>

1

por que no le pone un onchange al select.

1
  • Funcionó, gracias.. Commented el 5 mar. 2017 a las 1:39

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.