2

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.

introducir la descripción de la imagen aquí

1 respuesta 1

2

Si tienes problemas para obtener el valor seleccionado en los radio buttons, lo que puedes hacer es crear una función que coloque el valor del subtotal en la variable:

function setsubtotal(valor){
  subtotal=valor;
  document.getElementById("subtotal").innerHTML = subtotal;
}

y agregarles un onclick a los radios con la función y su valor:

onclick="setsubtotal(45000)"

de ese modo ya puedes obtener sus valores para hacer las sumatorias:

var subtotal = 45000;

function setsubtotal(valor){
  subtotal=valor;
  document.getElementById("subtotal").innerHTML = subtotal;
  console.log(`el subtotal es :${subtotal}`);
}

function costoFinal(){
            var ciudad = document.getElementById("ciudad").value;
            var sorpresa = document.getElementById("sorpresa").value;

            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;
        }
<label><input type="radio" name="planes" class="planes" value="45000" onclick="setsubtotal(45000)" checked>1<label>
<label><input type="radio" name="planes" class="planes" value="50000" onclick="setsubtotal(50000)">2<label>
<label><input type="radio" name="planes" class="planes" value="55000" onclick="setsubtotal(55000)">3<label>

         <!-- 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>

No olvides colocar checked al radio seleccionado por defecto.

Espero sea lo que buscas, saludos.

10
  • Excelente, era lo que estaba buscando! solucionaste mi problema. Muchas gracias por tu colaboración. Ya lo implemente y funciona de maravilla!.
    – Animal Box
    Commented el 2 oct. 2019 a las 5:18
  • @AnimalBox de nada, para eso estamos. Commented el 2 oct. 2019 a las 5:18
  • Tengo una última pregunta, como hago para que al seleccionar un plan, se me actualice también el total automáticamente sin tener que esperar a seleccionar ciudad o sorpresa para que se actualice el total... por ejemplo: en plan bimensual sale 50000 en el subtotal, pero en el total sale en 45000
    – Animal Box
    Commented el 2 oct. 2019 a las 5:25
  • muy simple @AnimalBox , puedes llamar la función costoFinal() dentro de la función setsubtotal(). Commented el 2 oct. 2019 a las 5:26
  • de que manera lo puedo hacer? gracias!
    – Animal Box
    Commented el 2 oct. 2019 a las 5:37

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.