JavaScript - Calculo en un formulario.

Pos: 63

Val: 32

Calculo en un formulario.

Publicado por Carlos (10 intervenciones) el 04/03/2021 13:37:50

Buenas, soy nuevo en este foro, y quería ver si me podríais echar una mano con un calculo en un formulario actualizable. El formulario consiste en sumar el "tipo de pagina" escogido mas las diferentes "secciones" que el usuario quiera en su pagina web, cuando se sume se debería aplicar el 5 % de descuento sobre el precio total por cada mes de plazo(con un máximo de un 20 %). El precio final se tiene que actualizar sin refrescar la pagina.
Os pongo el código del formulario, pero la función no se como echarle mano, he intentado varias cosas pero sin éxito y he decidido acudir al foro por si aquí encontraba la respuesta. Gracias de antemano.

<header>

    <h5>Tipo de pagina web</h5>

</header>

<select id="tipagina">

    <option value="100">Basico </option>

    <option value="200">Neutro</option>

    <option value="300">Avanzado</option>

</select>

<header>

    <h5>Plazo en meses</h5>

</header>

<input type="number" name="meses" class="caja_gris" maxlength="50" size="40" id="meses" value="5" /></input>

<header>

    <h5>Marque las selecciones deseadas</h5>

</header>

<p>

    Galeria de fotos: <input type="checkbox" id="selection" name="check1" value="40" />

    Quienes somos: <input type="checkbox" id="selection" name="check2" value="40" />

    Donde estamos: <input type="checkbox" id="selection" name="check3" value="40" />

    eComerce: <input type="checkbox" id="selection" name="check4" value="40" />

    Gestion interna: <input type="checkbox" id="selection" name="check5" value="40" />

    Noticias: <input type="checkbox" id="selection" name="check6" value="40" />

    Facebook: <input type="checkbox" id="selection" name="check7" value="40" />

    Twiter: <input type="checkbox" id="selection" name="check8" value="40" />

</p>

<input type="number" name="Total" id="Total" value="0" >

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.506

Calculo en un formulario.

Publicado por joel (895 intervenciones) el 04/03/2021 16:30:31

Hola Carlos, pero cual es el precio de cada sección?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 63

Val: 32

Calculo en un formulario.

Publicado por Carlos (10 intervenciones) el 04/03/2021 17:36:13

Buenas, los precios vienen indicados en los "value", seria sumar los "value" del apartado " Tipo de pagina web" + " las casillas seleccionadas del apartado "Marque las selecciones deseadas" y a ese resultado aplicarle el tanto porciento por cada mes (5 % cada mes hasta un máximo de 20 %).

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Calculo en un formulario.

Publicado por joel (895 intervenciones) el 04/03/2021 17:50:20

Ha, entiendo... haber que te parece el script que he añadido al final de tu código.

<header>

    <h5>Tipo de pagina web</h5>

</header>

<select id="tipagina">

    <option value="100">Basico </option>

    <option value="200">Neutro</option>

    <option value="300">Avanzado</option>

</select>

<header>

    <h5>Plazo en meses</h5>

</header>

<input type="number" name="meses" class="caja_gris" maxlength="50" size="40" id="meses" value="5" /></input>

<header>

    <h5>Marque las selecciones deseadas</h5>

</header>

<p>

    Galeria de fotos: <input type="checkbox" id="selection" name="check1" value="40" />

    Quienes somos: <input type="checkbox" id="selection" name="check2" value="40" />

    Donde estamos: <input type="checkbox" id="selection" name="check3" value="40" />

    eComerce: <input type="checkbox" id="selection" name="check4" value="40" />

    Gestion interna: <input type="checkbox" id="selection" name="check5" value="40" />

    Noticias: <input type="checkbox" id="selection" name="check6" value="40" />

    Facebook: <input type="checkbox" id="selection" name="check7" value="40" />

    Twiter: <input type="checkbox" id="selection" name="check8" value="40" />

</p>

<input type="number" name="Total" id="Total" value="0" >

<script>

document.querySelectorAll("input[type=checkbox]").forEach(el => el.addEventListener("click", calcular));

document.querySelectorAll("input[name=meses]").forEach(el => el.addEventListener("click", calcular));

function calcular() {

    let sum=[...document.querySelectorAll("input[type=checkbox]:checked")].reduce((acum, el) => acum+parseInt(el.value), 0);

    const meses=parseInt(document.getElementById("meses").value);

    const percent=meses * 5 > 20 ? 20 : meses * 5;

    document.getElementById("Total").value=sum - (sum * (percent / 100));

</script>

Valora esta respuesta

Comentar

Pos: 63

Val: 32

Calculo en un formulario.

Publicado por Carlos (10 intervenciones) el 04/03/2021 18:07:25

Buenas de nuevo, el codigo funciona, pero el tipo de pagina web no lo suma, solo suma las selecciones deseadas y hace el porcentaje. ¿ Como podria solucionar eso ?.
Muchas gracias por el interes y por el codigo, eternamente agradecido.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Calculo en un formulario.

Publicado por joel (895 intervenciones) el 05/03/2021 08:01:20

Hola Carlos, a que te refieres con que no lo suma?
Si selecciono dos check, con 5 meses me suma los dos check 40+40 y le quita el 20% = 64 Que es e lo que muestra 64!!

No es correcto?

Valora esta respuesta

Comentar

Pos: 63

Val: 32

Calculo en un formulario.

Publicado por Carlos (10 intervenciones) el 05/03/2021 12:27:19

Buenas, si, eso esta perfecto. Lo que me refiero es en :

<select id="tipagina">

    <option value="100">Basico </option>

    <option value="200">Neutro</option>

    <option value="300">Avanzado</option>

</select>

También se debería sumar a los checks seleccionados y al resultado de esa suma aplicarle el %.
Por ejemplo. Si escojo un tipo de pagina básico + 2 checks seria: 100 de la opción básica + 80 de los 2 checks = 180.
Y a ese 180 se le aplicaría el % dependiendo del numero de meses escogido.
Perdona si no me explico bien, muchas gracias por la ayuda.

Valora esta respuesta

-1

Comentar

Pos: 1

Val: 3.506

Calculo en un formulario.

Publicado por joel (895 intervenciones) el 05/03/2021 13:26:36

Ah, entiendo... entonces solo tienes que sumar ese valor, no?

<header>

    <h5>Tipo de pagina web</h5>

</header>

<select id="tipagina">

    <option value="100">Basico </option>

    <option value="200">Neutro</option>

    <option value="300">Avanzado</option>

</select>

<header>

    <h5>Plazo en meses</h5>

</header>

<input type="number" name="meses" class="caja_gris" maxlength="50" size="40" id="meses" value="5" /></input>

<header>

    <h5>Marque las selecciones deseadas</h5>

</header>

<p>

    Galeria de fotos: <input type="checkbox" id="selection" name="check1" value="40" />

    Quienes somos: <input type="checkbox" id="selection" name="check2" value="40" />

    Donde estamos: <input type="checkbox" id="selection" name="check3" value="40" />

    eComerce: <input type="checkbox" id="selection" name="check4" value="40" />

    Gestion interna: <input type="checkbox" id="selection" name="check5" value="40" />

    Noticias: <input type="checkbox" id="selection" name="check6" value="40" />

    Facebook: <input type="checkbox" id="selection" name="check7" value="40" />

    Twiter: <input type="checkbox" id="selection" name="check8" value="40" />

</p>

<input type="number" name="Total" id="Total" value="0" >

<script>

document.querySelectorAll("input").forEach(el => el.addEventListener("click", calcular));

document.querySelector("select").addEventListener("click", calcular);

document.querySelector("select").addEventListener("change", calcular);

function calcular() {

    let sum=[...document.querySelectorAll("input[type=checkbox]:checked")].reduce((acum, el) => acum+parseInt(el.value), 0);

    sum += sum>0 ? tipo = parseInt(document.getElementById("tipagina").value) : 0;

    const meses=parseInt(document.getElementById("meses").value);

    const percent=meses * 5 > 20 ? 20 : meses * 5;

    document.getElementById("Total").value=sum - (sum * (percent / 100));

</script>

Valora esta respuesta

Comentar

Pos: 63

Val: 32

Calculo en un formulario.

Publicado por Carlos (10 intervenciones) el 05/03/2021 13:42:43

Si, perfecto, eso era. Muchísimas gracias por la ayuda y por la atención. Un saludo.

Valora esta respuesta

Comentar

&nbsp o escribir al lado no responde

JAVASCRIPT DNI AYUDA URGENTE