5

Estoy trabajando con PHP. Tengo un formulario para ingreso de solicitudes. Cuando se ingresa un formulario el sistema envía un correo con PHPMailer con la información de la solicitud, todo eso funciona bien. Pero ingresando una solicitud observe un detalle que hasta ahora no he logrado resolver. Cuando presiono ENVIAR para crear una solicitud, el sistema tarda unos segundos en mostrar el mensaje que el registro fue ingresado, y en esos segundos de espera si yo presiono enviar nuevamente, el sistema crea nuevas solicitudes que se almacenan en la base de datos y también envía correo por cada vez que presione ENVIAR. Me gustaría que alguien me pueda indicar como controlo y evito que un usuario envía varias veces la misma solicitud.

Les comparto mi código:

//MI FORMULARIO//

Solicitar Pasantía
    <div class="panel-body">
     <div class="col-md-12">
      <form method="post" action="ingresar_pasantia.php" class="clearfix">
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">
               <i class="glyphicon glyphicon-user"></i>
              </span>
           </div>
          </div>
  
          <div class="form-group">
            <div class="row">
              <div class="col-md-5">
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="glyphicon glyphicon-th-list"></i>
                  </span>
                    <input type="text" name="nombre_docente" placeholder="Nombres">>
                </div>
              </div>

              <div class="col-md-5">
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="glyphicon glyphicon-th-list"></i>
                  </span>
                    <input type="text" name="apellido_docente" placeholder="Apellidos">
                </div>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <div class="row">
              <div class="col-md-4">
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="glyphicon glyphicon-th-list"></i>
                  </span>
                  <input type="text" name="rut" placeholder="Rut" maxlength="10">
                </div>
              </div>

              <div class="col-md-5">
                <div class="input-group">
                    <span class="input-group-addon">
                      <i class="glyphicon glyphicon-envelope"></i>
                    </span>
                    <input type="email" name="email" placeholder="E-Mail">
                  </div>
                </div>
            </div>
          </div>

          <button type="submit" name="ingresar_pasantia">Enviar</button>
          <a href="pasantia.php" class="btn btn-primary">Mis Solicitudes</a>
      </form>
     </div>
    </div>
  </div>
</div>

// GUARDAR REGISTRO EN BASE DE DATOS //

 if(isset($_POST['ingresar_pasantia']))
 {
   $req_fields = array('nombre_docente','apellido_docente','rut','email');
   validate_fields($req_fields);
   if(empty($errors))
   {
     $nombre_docente  = remove_junk($db->escape($_POST['nombre_docente']));
     $apellido_docente  = remove_junk($db->escape($_POST['apellido_docente']));
     $rut   = remove_junk($db->escape($_POST['rut']));
     $email   = remove_junk($db->escape($_POST['email']));

     $query  = "INSERT INTO pasantia (";
     $query .=" nombre_docente, apellido_docente, rut, email";
     $query .=") VALUES (";
     $query .=" '{$nombre_docente}','{$apellido_docente}','{$rut}','{$email}'";
     $query .=")";
     $query .=" ON DUPLICATE KEY UPDATE nombre_docente='{$nombre_docente}'";

     if($db->query($query))
     {
       $session->msg('s',"Solicitud ingresada exitosamente. ");
       redirect('ingresar.php', false);
       unlink($path);
     } 
     else 
     {
       $session->msg('d',' Lo siento, registro falló.');
       redirect('prod.php', false);
     }
   } 
   else
   {
     $session->msg("d", $errors);
     redirect('ingresar.php',false);
   }
}
7
  • 2
    Qué tal deshabilitar el botón en el momento en que se hace click?
    – Arriel
    Commented el 29 jul. 2022 a las 15:55
  • Gracias por responder, que función podría ocupar para eso??
    – SBK22
    Commented el 29 jul. 2022 a las 16:04
  • Qué palabras utilizaste en google? Yo busqué "deshabilitar botón stack overflow" y varios enlaces me funcionaron bien
    – Arriel
    Commented el 29 jul. 2022 a las 16:08
  • Actualice la pregunta, agregue una función que encontré, pero al presionar el botón se logra deshabilitar pero no guarda el formulario
    – SBK22
    Commented el 29 jul. 2022 a las 16:13
  • 2
    Más allá de desactivar bien o mal el botón, deberías asegurar que tu lógica de negocio no inserte registros repetidos. Por qué no validas a nivel de base de datos que si cierto valor se repite (o si cierto conjunto de columnas se repite), no inserte? Eso sería un UNIQUE constraint. Si soy un usuario malo, pues me salto la interfaz y mando la petición desde postman y te lleno de mugre la BD.
    – Alfabravo
    Commented el 29 jul. 2022 a las 18:31

2 respuestas 2

2

Si el problema es con el disabled, yo no suelo utilizarlo, este atributo deshabilita por completo el elemento, hace como si no existiera, en este caso se lo estamos asignando aun botón en un formulario, lo que hace que no cumpla con su función y también la de los elementos anteriores, en este caso los inputs de información, esto si funcionaria si lo hiciéramos con Ajax en beforesend. AHORA LA MODIFICACIÓN LA HACEMOS DESDE CSS, AGREGAMOS UNA CLASE AL HACER EL SUBMIT DEL FORM DESABILITANDO LOS CURSORES:

$(document).ready(function() {
  $("form").on("submit", function() {
    //AGREGAMOS UNA CLASE PARA DESABILITAR DESDE CSS
    $("[name='ingresar_pasantia']").addClass('sinEvento');
  });
});
.sinEvento {
  cursor: not-allowed;
  background-color: rgb(229, 229, 229) !important;
}

.sinEvento>* {
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="col-md-12">
    <form method="post" action="ingresar_pasantia.php" class="clearfix">
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-user"></i>
          </span>
        </div>
      </div>

      <div class="form-group">
        <div class="row">
          <div class="col-md-5">
            <div class="input-group">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-th-list"></i>
              </span>
              <input type="text" name="nombre_docente" placeholder="Nombres">
            </div>
          </div>

          <div class="col-md-5">
            <div class="input-group">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-th-list"></i>
              </span>
              <input type="text" name="apellido_docente" placeholder="Apellidos">
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="row">
          <div class="col-md-4">
            <div class="input-group">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-th-list"></i>
              </span>
              <input type="text" name="rut" placeholder="Rut" maxlength="10">
            </div>
          </div>

          <div class="col-md-5">
            <div class="input-group">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-envelope"></i>
              </span>
              <input type="email" name="email" placeholder="E-Mail">
            </div>
          </div>
        </div>
      </div>

      <button type="submit" name="ingresar_pasantia" id="send">Enviar</button>
      <a href="pasantia.php" class="btn btn-primary">Mis Solicitudes</a>
    </form>
  </div>
</div>
</div>
</div>

DIME SI ES LA BUENA.

9
  • Efectivamente deshabilita el botón, pero el formulario no se envía y además ya no valida los campos required.
    – SBK22
    Commented el 29 jul. 2022 a las 17:00
  • actualice la pregunta con una función que si permite el envío del formulario y se deshabilita, pero lo hace al segundo clic y no inmediatamente al presionar enviar
    – SBK22
    Commented el 29 jul. 2022 a las 17:04
  • He modificado mi respuesta, deshabilita el botón y envía el formulario. Commented el 29 jul. 2022 a las 17:37
  • Continua sin enviar el formulario, se deshabilita y se carga nuevamente la pagina.
    – SBK22
    Commented el 29 jul. 2022 a las 18:01
  • Si el problema es con el disabled, yo no suelo utilizarlo, este atributo deshabilita por completo el elemento, hace como si no existiera, en este caso se lo estamos asignando aun botón en un formulario, lo que hace que no cumpla con su función y también la de los elementos anteriores, en este caso los inputs de informacion, esto si funcionaria si lo hiciéramos con Ajax en beforesend. Lo que podemos hacer es remplazar el elemento, modifique de nuevo mi respuesta. Commented el 29 jul. 2022 a las 18:31
1

Lo resolvi con la siguiente funcion:

$(document).ready(function(){
    $("form").submit(function(e){
    
        $("[name='ingresar_pasantia']").click(function(){
            $(this).attr("disabled","disabled");
        });
   
  });   
});

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.