0

Tengo un formulario donde el usuario completa varios INPUT y, por último, un SELECT.
Hasta que el usuario no complete todo, el botón CONFIRMAR no se HABILITA.
El código (JS) que les voy a mostrar funciona perfecto, pero... tengo un error con el SELECT:
Si lo completo a lo último, el botón nunca se habilita, pero si toco en otro input sí.
Si lo completo primero y luego el resto de los input, funciona...
El error debe ser una tontería, pero... ¿cuál sería?

function habilitar_confirmar() {

    var dni = document.getElementById('txt_dni').value;
    var apellidos = document.getElementById('txt_apellido').value;
    var nombres = document.getElementById('txt_nombre').value;
    var cargo = document.getElementById('txt_cargo_select').value;

    if (dni && apellidos && nombres && cargo) {
        document.getElementById('btn_confirmar').disabled = false;
    } else {
        document.getElementById('btn_confirmar').disabled = true;
    }
}
2
  • esta función, qué la dispara? supongo que algún onChange, onClick o algo así lo dispara desde los inputs, para el caso del select, no recuerdo que acción lo dispara, creo que es onSelectedChanged o algo similar... Commented el 28 ene. 2022 a las 16:53
  • @L.Ronquillo Hola! Efectivamente, la función se dispara con onKeyUp="habilitar_btn_confirmar_usuario()" en cada uno de los INPUT. Y en los SELECT se dispara con ONCHANGE. Gracias!!!
    – Luciano
    Commented el 28 ene. 2022 a las 17:04

2 respuestas 2

0

El error se encontraba en la acción que debía dispararse en el SELECT:

Antes, en todos los INPUT y en todos los SELECT había puesto:

onkeyup="habilitar_btn_confirmar_usuario()"

En cada INPUT debe ir ONKEYUP:

<input type="text" id="txt_dni" onkeyup="habilitar_btn_confirmar_usuario()">  

En cada SELECT debe ir ONCHANGE:

<select id="txt_cargo_select" onchange="habilitar_btn_confirmar_usuario()"></select>  

Código JS:

function habilitar_confirmar() {

   var dni = document.getElementById('txt_dni').value;
   var apellidos = document.getElementById('txt_apellido').value;
   var nombres = document.getElementById('txt_nombre').value;
   var cargo = document.getElementById('txt_cargo_select').value;

   if (dni && apellidos && nombres && cargo) {
      document.getElementById('btn_confirmar').disabled = false;
   } else {
      document.getElementById('btn_confirmar').disabled = true;
}}

Gracias!

3
  • sólo para complementar tu respuesta, ¿Podrías poner que acción cambiaste en el select? es decir, cual tenías que te daba error, para que, si a futuro alguien tiene este problema, lea tu pregunta y pueda arreglarlo :D Commented el 28 ene. 2022 a las 17:16
  • @L.Ronquillo Edité la respuesta. Gracias!
    – Luciano
    Commented el 28 ene. 2022 a las 17:19
  • @Luciano usar los eventos como atributos en un elemento, no es una buena practica
    – Daniel
    Commented el 28 ene. 2022 a las 17:44
0

Aquí te dejo una forma de hacer lo que pides

cuando quieres seleccionar varios elementos, usa document.querySelectorAll() para disminuir código.

var inputs = document.querySelectorAll(".input");
var send = document.getElementById("enviar");

var convertNodeList = (function(e) { // esto se llama IIFE
  var array = [];
  var nuevoArray = array.slice.call(e);
  // convierte los NodeList en array, otra forma de hacerlo sería así array.push.apply(array, NodeList)

  /*
   convertir los NodeList en array ayudará a usar el foreach()  
   sin problemas en navegadores que no acepten el NodeList en
   el foreach()
  */

  /* 
  otra forma de hacerlo seria así [...NodeList]
  aunque esto no es tan compatible para algunos navegadores 
  */

  return nuevoArray;
})(inputs);

var array = convertNodeList;

array.forEach(function(input) {
  input.onkeyup = function() { // agregar evento de escritura a los input
    for (int in array) { // con un for() comprobamos si todos los inputs no están vacios
      var value = array[int].value;
      if (/[a-zA-Z0-9]/g.test(value) || !(value == "")) { // si no está vacío el input, el botón se habilita
        send.disabled = false;
      } else { // de caso contrario el botón se desabilita
        send.disabled = true;
      }
    }
  }
})
<input type="text" class="input" placeholder="Ingresa tu nombre">
<input type="email" class="input" placeholder="Ingresa tu correo">
<input type="password" class="input" placeholder="Ingresa tu password">

<input type="button" id="enviar" value="enviar" disabled>

Espero haberte ayudado! :)

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.