I have this script
, which allows me to add numbers in real time:
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>
And it works perfectly. But now I have the amount to pay in a select, and I have problems performing this operation.
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>
The code that I present is a variation of the code of the question, it has to have all the fields filled and it would work in real time, using the events of
change
for theselect
, and.on
for the fields.why don't you put an onchange to the select.