2

tengo un formulario para solicitar información. Ahora mismo tenia que se le puede pulsar al botón de enviar y gracias al required ese formulario no se puede enviar hasta que no se rellenan los datos. Además tengo un check de aceptación que hasta que no se pulsa no se puede enviar el formulario.

Bien, pues por temas de conversiones necesito que el botón de enviar formulario se mantenga en disabled hasta que todos los campos se hayan rellenado.

Formulario:

<form enctype="multipart/form-data" id="infoEquipo" method="post" class="formInfo">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-user form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="nombre" id="nombre" placeholder="Persona de contacto" required>
          </div>
          <div class="separaInput">
            <i class="fas fa-mobile-alt form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="telefono" id="telefono" placeholder="Teléfono" required>
          </div>
          <div class="separaInput">
            <i class="fas fa-envelope form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="email" id="email" placeholder="Email" required>
          </div>
          <div class="separaInput">
            <i class="fas fa-map-marker-alt form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="ciudad" id="cuidad" placeholder="Ciudad" required>
          </div>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-building form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="centro" id="centro" placeholder="Nombre del centro" required>
          </div>
          <div class="separaInput" style="display:none;">
            <i class="fas fa-sign-in-alt form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="equipo" id="equipo" value="<?php echo $encu['nombreEquipo'];?> <?php echo $encu['small'];?>">
          </div>
          <div class="form-group separaInput2">
            <label class="laberformInfo"><i class="far fa-comment"></i> Mensaje</label>
            <textarea class="form-control myInput3" name="mensaje" id="mensaje" rows="5" required></textarea>
          </div>
        </div>
      </div>
      <div class="col-12 center">
        <div class="">
          <input name="chec" class="chzxc" type="checkbox" id="chec" onchange="comprobarInfoEquipo(this);" style="display:inline-block;">
          <label class="labTerm" style="display:inline;">He leído y acepto la <a href="privacidad-y-condiciones.php" title="Privacidad y Condiciones">Privacidad y Condiciones</a></label>
        </div>
      </div>
      <div id="mensajeResp" style="text-align:center" style="margin-bottom:2%;">

      </div>

      <div class="aceptoTerm">
        ACEPTO QUE TENGO EL CONCEPTO DE MED-APOLO PARA RECOPILAR Y USAR MI INFORMACIÓN PERSONAL DE ACUERDO CON LA POLÍTICA DE PRIVACIDAD DEL CONCEPTO DE MED-APOLO. *
      </div>
      <button  type="submit" id="llamada223" class="btn btn-primary btnNews2 espacioEnvia" disabled>MÁS INFORMACIÓN</button>
    </form>

Esto es para que hasta que no se pulsa el check el botón no se activa:

  function comprobarInfoEquipo(obj)
    {
      if (obj.checked)
       document.getElementById('llamada223').disabled = false;
      else
       document.getElementById('llamada223').disabled = true;
    }

El AJAX para el envio del formulario

$(function(){
    $("#infoEquipo").on("submit", function(e){
        e.preventDefault();
        var f = $(this);
        var formData = new FormData(document.getElementById("infoEquipo"));
        formData.append("dato", "valor");

        $.ajax({
            url: "respuestas/respuesta-infoEquipo.php",
            type: "post",
            dataType: "html",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,

             beforeSend: function(){
              $("#mensajeResp").html("<div class='ui active inline loader myLoader' style='margin-bottom:1%;'></div>")
              },
             success: function (resultado){
              setTimeout(function(){
                $("#mensajeResp").html(resultado);
              }, 1300);
            }
          });
              setTimeout(function () {
                location.reload();
              }, 5000); //will call the function after 2 secs
       });
    });
0

4 respuestas 4

0

prueba a activar el boton una vez que el valor de los campos sea != "" les puedes poner una clase a todos los input q sea la misma y desde jquery con un each haces un if para ver su estado y asi recorres todos los input y si ninguno de ellos es == "" entonces activas el boton tambien desde jquery.

2
  • Un ejemplo en código ayudaría mucho a elevar la calidad de tu aporte
    – user128299
    el 17 abr. 2020 a las 13:55
  • Si por favor un ejemplo me ayudaria a entender mejor lo que comentas @Yandrak
    – Miguel
    el 17 abr. 2020 a las 14:29
0

Se debe compropar que todos los campos estén completados y el check "chequeado"

Si todo se cumple eliminar el attr disabled del botón

<script>    
    $(document).ready(function() {
    function comprobacion(){
        if(todos completados){
            $(".espacioEnvia").removeAttr("disabled");
        }
        else{
            $(".espacioEnvia").attr("disabled","disabled");
        }
    }
    setInterval(comprobacion, 500);
    });
</script>
2
  • Hola buenas, y donde estas comprobando el check??
    – Miguel
    el 17 abr. 2020 a las 15:14
  • if( $('.micheckbox').attr('checked') ) devolverá true or false el 20 abr. 2020 a las 22:56
0

Coloca a nivel del HTML en la etiqueta del button un atributo llamado disabled para que desde que carga la web aparezca desvanecido.

Puedes asignar una clase en común a todos los input de tu formulario y posterior obtener todos estos y asignarlos a una variable por medio del método querySelectorAll.

Una vez hecho lo anterior tendrás un nodeList de todos esos input por lo cual puedes acceder a ellos por medio del índice que ocupan.

Con lo anterior claro, podemos asignar un evento al último de ellos con la sintaxis de:

 variable[indice]

De modo que le agregamos a dicho índice un listener sobre el evento keyup y por dentro de la función anónima que pasamos como segundo argumento al lsitener verificamos con una sentencia condicional lo siguiente:

  • Si ambos índices de la misma variable en su atributo value son diferentes de "" entonces obtenemos por medio de su id al botón accedemos a su propiedad disabled y la igualamos a false para que de este modo se active y puedas procesar el formulario.
  • Una vez hecho lo anterior, usamos la variable que almacena un acceso previo al mismo botón y le agregamos un listener al evento click mismo que dentro de la función podrá procesar tu formulario y enviar los datos de los inputs

Para el ejemplo yo coloque 1 por qué es el último indice de mis valores recuperados, tu sustituye lo por el que corresponda, recordando que el conteo inicia en 0

Ejemplo

    <form action="">
      <input class="cajasTexto" type="text">
      <input class="cajasTexto" type="text">
      <button disabled id="envio">Enviar</button>
    </form>
    <script>
        let boton1  = document.getElementById("envio")
        let cajasTexto = document.querySelectorAll(".cajasTexto")
    
        cajasTexto[1].addEventListener("keyup", () => {
          if(cajasTexto[0].value != "" && cajasTexto[1].value != "") {
              document.getElementById("envio").disabled = false
          } else {
              document.getElementById("envio").disabled = true
          }
        })
        
        boton1.addEventListener("click", (event) => {
              event.preventDefault()
              console.log("Aquí envias tu formulario con el AJAX que ya tienes...")
        })
    </script>

7
  • No me llego a funcionar bien el código o no lo supe poner bien, sobre todo no entendi como juntar eso con mi AJAX, de todos modos, abajo puse una solución pero con dudas por si quieres mirar, gracias!
    – Miguel
    el 17 abr. 2020 a las 15:07
  • Dónde puse el mensaje de console ahí iba tu Ajax
    – user128299
    el 17 abr. 2020 a las 15:08
  • Si! lo llegue a ver, pero aun soy bastante novato y no se que parte de todo mi script tengo que poner ahí
    – Miguel
    el 17 abr. 2020 a las 15:09
  • Además lo que veo que si luego vacias los inputs, se mantiene activado el botón y además el checkbox tambien tiene que estar marcado
    – Miguel
    el 17 abr. 2020 a las 15:34
  • Todo eso se controla ampliando las reglas del if y agregando un else
    – user128299
    el 17 abr. 2020 a las 15:41
0

Solucionado de la siguiente manera:

SCRIPT

 (function() {
    $('#infoEquipo > div > div > div > input, textarea').keyup(function() {
      $("#micheckbox334").on("click", function(){

        var empty = false;
        $('form > div > div > div > input, textarea').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });
        if (empty) {
            $('#llamada223').attr('disabled', 'disabled');

        } else {
            $('#llamada223').removeAttr('disabled');
        }
      });
     });
  })()

Saludos

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.