Skip to main content
2 de 2
se eliminaron 96 caracteres en el cuerpo; título editado

validacion en los radiobutton JAVASCRIPT

pude resolver el primer inconveniente, me gustaria agregarle a este codigo una verificacion para que cada pregunta tenga 1 radiobutton seleccionado y sino de una alerta de error de cual es la pregunta que falta por seleccionar, deberia ser facil, pero este form usa el method post y no consigo hacer que funcione.

el codigo es para un encuesta tipo quiz de personalidad, me gustaria poder añadirle una imagen a cada una de las personalidades en el resultado, que fue limitado a solo dos de los 10 posibles que tendria al final. Gacias!

        function computeForm(form) {
              
              var max = 4
              var html = "<ol>"
              var resultado = document.getElementById("resultado");
              var options = [
                {
                  "formNombre": "a",
                  "seccion":"amigo",
                  "puntos":0,
                  "texto": "hola"
                },{
                  "formNombre":"c",
                  "seccion":"cuidador",
                  "puntos":0, 
                  "texto": ""
                }]
                
                options = options.map(el=>{
                  var valor = (form[el.formNombre]).value;
                  el.puntos = (((valor == 0)?0:valor/max).toFixed(2)*100);
                  return el;
                });

                options.sort((x, y)=>{
                  return y.puntos - x.puntos;
                });

                options = options.map(el=>{
                  el.texto = `<li>Obtuviste ${el.puntos}% en ${el.seccion}</li>`;
                  return el;
                }).slice(0, 2);

                options.map(el=>{
                  html += el.texto;
                })

                resultado.innerHTML = html + "</ol>";
            };
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</HEAD>

<BODY>
<h1>Test </h1><br><br>
<form name="test" METHOD=POST>
    <h3>1.- Soy optimista</h3>
    <input TYPE="radio" NAME="a" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="a" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="a" VALUE="0" required><span>Nunca</span><br>

    <h3>2.- Tengo empatia</h3>
    <input TYPE="radio" NAME="b" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="b" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="b" VALUE="0" required><span>Nunca</span><br>

    <h3>3.- Apoyo a otros</h3>
    <input TYPE="radio" NAME="c" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="c" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="c" VALUE="0" required><span>Nunca</span><br>

    <h3>4.- Soy comprensivo</h3>
    <input TYPE="radio" NAME="d" VALUE="2" required><span>Siempre</span><br>
    <input TYPE="radio" NAME="d" VALUE="1" required><span>Casi siempre</span><br>
    <input TYPE="radio" NAME="d" VALUE="0" required><span>Nunca</span><br>

    <input class="btn" TYPE="button" VALUE="Calcular" onClick=computeForm(this.form)><br><br>

</form>

<div id="resultado"></div>

</BODY>

</html>