1

Tengo un "pequeño" formulario en mi html. Ahora la idea es con js capturar el input que yo clickee, ya sea depositar o retirar, y mandar el dato para hacer la operacion requerida. Como capturo el input clickeado? y segundo una vez que clickeo en un input quiero deshabilitar el otro, como hago??

var form_operar = document.querySelector('#form_op');

form_operar.addEventListener('submit', function() {
      let error = false;

      if (!document.querySelector('input[name="depositar"]:checked') && !document.querySelector('input[name="retirar"]:checked')) {
          alert('Selecciona una tarea');
          error = true;

      }
      
      if (error) { event.preventDefault(); }


 });
<div id="operaciones">
    <form id="form_op" onsubmit="return false">
        <label for="retirar" class="operacion">Retirar</label>
        <input type="radio" name="retirar" id="retirar">

        <label for="depositar" class="operacion">Depositar</label>
        <input type="radio" name="depositar" id="depositar">


        <input type="submit" value="Continuar" id="continuar">

    </form>
</div>

1 respuesta 1

2

Solo se puede elegir una opción, entonces, lo adecuado es que ambos radios tengan el mismo nombre, en este caso, operacion y agregar el valor que les corresponde. Con esto también simplificas la verificación, si no se seleccionó una operación document.querySelector('input[name="operacion"]:checked') devolverá falso.

var form_operar = document.querySelector('#form_op');
form_operar.addEventListener('submit', function() {
    let error = false;

    // Revisa si se marcó alguna de las opciones
    if (!document.querySelector('input[name="operacion"]:checked')) {
        alert('Selecciona una tarea');
        error = true;
    }
    if (error) {
        event.preventDefault();
        // Finalizar
        return false;
    }
    // Valor del radio
    console.log(document.querySelector('input[name="operacion"]:checked').value);
    // Solo para evitar que se ejecute el formulario en el snippet
    // Quítalo o coméntalo en tu proyecto
    event.preventDefault();
});
<div id="operaciones">
            <form id="form_op" onsubmit="return false">
                <label for="retirar" class="operacion">Retirar</label>
                <input type="radio" name="operacion" id="retirar" value="retirar">

                <label for="depositar" class="operacion">Depositar</label>
                <input type="radio" name="operacion" id="depositar" value="depositar">


                <input type="submit" value="Continuar" id="continuar">

            </form>
        </div>

2
  • wala, que rápido :v, +1, si amigo kevin, Triby tiene razón el problema era que no estabas relacionando los name de tus input radio por el mismo nombre, por esta razón ambos podían ser seleccionables y uno no afectaba al otro.
    – Layer
    el 7 may. 2020 a las 21:00
  • Muchas gracias! funciono! el 7 may. 2020 a las 21:05

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.