1

Estoy intentando validar que estén marcados inputs tipo radio a la vez, cuando el usuario precione el boton de enviar, entonces si un radio esta sin marcar que le salga una alerta.

Lo que tengo es esto:

función jq:

function submitSw_Sesiones_ses2_act1(){
    event.preventDefault();

        alert(document.getElementById("g").checked);
    if (document.getElementById("g").checked== false){
        alert("Acepta los terminos y condiciones del servicio");
        document.getElementById("<strong>aceptocondiciones_chk</strong>").focus();
        return false;
    }
    return true;

}

Al parecer si me lo esta haciendo pero solamente con el primer radio, es decir si marco el primer radio, me marca un true aun que estén desmarcados los demás.

HTML:

<tr>
    <td>Desechar todos los cigarros, limpiar los ceniceros, deshacerse de cerillos y encendedores. Pensar en cualquier imagen negativa acerca del cigarro.</td>
    <td align="center"><input type="radio" id="g"  name="recomendacion_1" value="Si" required>&nbsp;Si &nbsp;&nbsp;<input type="radio" id="g"  name="recomendacion_1" value="No" required>&nbsp;No</td>
    </tr>
    <tr>
    <td>Adoptar una actitud positiva, tratar de concebirse como ex fumador.</td>
    <td align="center"><input type="radio" id="g"  name="recomendacion_2" value="Si" required>&nbsp;Si &nbsp;&nbsp;<input type="radio" id="g"  name="recomendacion_2" value="No" required>&nbsp;No</td>
    </tr>
                            

1 respuesta 1

0

Estás asignando el mismo ID a todos los campos; los ID deben ser únicos. document.getElementById() te va a devolver siempre solo un elemento, por lo general, el primero.

Te sugiero usar document.querySelector() donde puedes seleccionar elementos por atributos HTML, como nombre de campo y si está marcado.

  • Para buscar por el atributo de nombre, usas el selector [name="nombre_del_campo"]
  • Para que obtenga solo el que está marcado, agregas :checked

Si el radio no tiene una opción marcada, querySelector() va a devolver un valor nulo y eso es lo que puedes usar para validar.

function submitSw_Sesiones_ses2_act1(e) {
    e.preventDefault();
    
    // Obtener valor del cada radio, por nombre y estado
    let recom1 = document.querySelector('[name="recomendacion_1"]:checked');
    let recom2 = document.querySelector('[name="recomendacion_2"]:checked');
    
    // Si alguno no fue marcado, la variable será nula
    // Podría ser: recom1 === null || recom2 === null
    // Pero esto funciona igual, null es considerado falso en la comparación
    if(!recom1 || !recom2) {
        console.log('Debes seleccionar una opción en cada recomendación.');
        return false;
    }
    // Los dos radios fueron marcados
    console.log(recom1.value, recom2.value);
    return true;
}

// Asignar evento al botón
document.querySelector('#btn-submit').addEventListener('click', submitSw_Sesiones_ses2_act1);
<table>
<tr>
    <td>Desechar todos los cigarros, limpiar los ceniceros, deshacerse de cerillos y encendedores. Pensar en cualquier imagen negativa acerca del cigarro.</td>
    <td align="center">
        <input type="radio" name="recomendacion_1" value="Si" required>&nbsp;Si &nbsp;&nbsp;
        <input type="radio" name="recomendacion_1" value="No" required>&nbsp;No</td>
</tr>
<tr>
    <td>Adoptar una actitud positiva, tratar de concebirse como ex fumador.</td>
    <td align="center">
        <input type="radio" name="recomendacion_2" value="Si" required>&nbsp;Si &nbsp;&nbsp;
        <input type="radio" name="recomendacion_2" value="No" required>&nbsp;No</td>
</tr>
</table>
<!-- Agregado solo para probar -->
<button id="btn-submit">Enviar</button>

Prueba haciendo clic en el botón, primero sin marcar los radios, verás que aparece el mensaje de error en la consola. Ya cuando marcas los dos y vuelve a hacer clic en el botón, puedes ver los valores seleccionados.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.