Tengo un formulario donde solicito varios datos, entre ellos el valor del envío se calcula de acuerdo a su ciudad, la sorpresa se calcula cuando deciden incluir una sorpresa en su pedido, en este orden de ideas ambas son input selects.
No he tenido problemas al sumar los subtotales y los totales de lo anterior. Sin embargo, el cambio sub-total depende de un input radio, el cual no he dado para sumarlo sin que me de error, es decir:
El subtotal depende de escoger uno de 3 planes y su valor varía de acuerdo al precio:
- bimensual $45000
- mensual $50000
- única vez $55000
de que manera puedo cambiar su valor sin que sea fijo la variable sub-total, sino que cambia al seleccionar una de esas radios...
Dejo el código de mi desarrollo.
<label><input type="radio" name="planes" class="planes" value="45000">1<label>
<label><input type="radio" name="planes" class="planes" value="50000">2<label>
<label><input type="radio" name="planes" class="planes" value="55000">3<label>
<script type="text/javascript">
// CALCULAR VALOR DE LA CAJA //
function costoFinal(){
var ciudad = document.getElementById("ciudad").value;
var sorpresa = document.getElementById("sorpresa").value;
var subtotal= 45000;
var total = (parseInt(ciudad)) + (parseInt(sorpresa)) + (parseInt(subtotal));
var envio = (parseInt(ciudad));
var sorpresaadicional = (parseInt(sorpresa));
document.getElementById("envio").innerHTML = envio;
document.getElementById("sorpresaadicional").innerHTML = sorpresa;
document.getElementById("result").innerHTML = total;
document.getElementById("subtotal").innerHTML = subtotal;
}
</script>
<!-- RESUMEN DE COMPRA -->
<div class="col-sm-3" style="text-align: center;">
<ul>
<li style="margin: 5px;"><label>Sub-total ($) : </label><span id="subtotal" class="resumencompra">45000</span> </li>
<li style="margin: 5px;"><label>Envío ($) : </label><span id="envio" class="resumencompra">0</span></li>
<li style="margin: 5px;"><label>Sorpresa ($) : </label><span id="sorpresaadicional" class="resumencompra">0</span></li>
<li style="margin: 5px;"> <label>Total ($) : </label><span id="result" class="resumencompra">45000</span></li>
</ul>
</div>
Igualmente intenté cambiando la variable del subtotal de la siguiente manera:
<li style="margin: 5px;"><label>Sub-total ($) : </label><span id="subtotal" class="subtotal">45000</span> </li>
<script type="text/javascript">
let planes = document.querySelectorAll(".planes")
let subtotal = document.querySelector(".subtotal")
for(let i = 0; i < planes.length; i++){
planes[i].addEventListener("click",function(){
document.getElementById("subtotal").innerHTML = planes[i].value
})
}
</script>
Con lo anterior, logré traer el dato del plan escogido al subtotal, sin embargo, me deja de calcular los demás valores de sorpresa, envío y total y me da error.
¿De que manera puedo calcular la sumatoria de los inputs de select y radios de manera correcta con el primer código que realicé? especialmente en los inputs de radios porque los selects me calculan sin problema los valores.
De antemano, muchas gracias por su amable colaboración.