1

Buen día,

Actualmente presento un problema en el cual el usuario no espera que el servidor procese la información y oprime nuevamente el botón de enviar el formulario provocando que se duplique la información, estaba pensado en deshabilitar el botón de envió cuando el usuario oprime por primera vez mientras el servidor resuelve.

Se debe tener en cuenta que los campos del formulario son obligatorio en el frontend y también se validan en el backend (php) así que si el usuario oprime el botón de enviar pero no cumple con las validaciones se tiene que volver a habilitar.

    if(!empty($_POST))
{
  if (empty($_POST['estado']) || empty($_POST['monto_girado']) || empty($_POST['observaciones_contabilidad']) ){   
    echo '<script language="javascript">alert("Todos los campos son obligatorios");</script>';
  }else{
    if ($_POST['estado'] == 1 ){
      $estado_general_texto = "Girado";
    }else{
     $estado_general_texto = "No girado";
    };
    $query ="
        INSERT INTO anticipos (estado_texto, estado_numero, valor_girado, observaciones_contabilidady)
        VALUES
        ('{$estado_general_texto}','{$_POST['estado']}','{$_POST['monto_girado']}','{$_POST['observaciones_contabilidad']}')
    ";
            //ejecuta el query en la DB
            $conexion->ejecutar($query);

            $email = "[email protected]";
            $nombre= "test";
            $asunto = "Aprobacion";
            $cuerpo = "Registro creado";         
            enviarEmail($email, $nombre, $asunto, $cuerpo);
            header("Location: ./pendientes.php");
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<form class="well" action="" method="POST" enctype="multipart/form-data">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="coordinador">Coordinador</label>
        <input type="text" class="form-control" name="coordinador" value="CESAR INSUASTY" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="proyecto">Proyecto</label>
        <input type="text" class="form-control" name="proyecto" value="IMPLEMENTACIÓN" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="destinatario">Destinatario</label>
        <input type="text" class="form-control" name="destinatario" value="LUIS PEREZ" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="ot">Documento Destinatario</label>
        <input type="text" class="form-control" name="ot" value="123456789" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="ot">OT</label>
        <input type="text" class="form-control" name="ot" value="1305" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="destino">Destino</label>
        <input type="text" class="form-control" name="destino" value="COMPRA PC" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="">Monto solicitado</label>
        <input type="text" class="form-control" name="monto_solicitado" value="150000" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="">Observaciones coordinador</label>
        <input type="text" class="form-control" name="observaciones_coordinador" value="NINGUNA" readonly="readonly">
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="">Monto girado *</label>
        <input type="number" class="form-control" name="monto_girado" required>
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="estado">Estado *</label>
        <select class="form-control" style="width: 100%;" name="estado" required>
          <option selected="selected" value=""></option>
          <option value="1">Girado</option>
          <option value="2">No Girado</option>
        </select>
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="fecha_giro">Fecha consignación *</label>
        <input type="date" class="form-control" name="fecha_giro" required>
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <label for="observaciones_contabilidad">Observaciones *</label>
        <input type="text" class="form-control" name="observaciones_contabilidad" required value="Ninguna">
      </div>
    </div>
    <button type="submit" class="btn btn-success col fileinput-button">Enviar</button>
  </div>
</form>

El desarrollo lo estoy haciendo con HTML y PHP

5
  • Agrega que llevas hecho al momento
    – user128299
    Commented el 24 feb. 2021 a las 15:38
  • @cesar, deberias mostrar el codigo HTML, PHP y JS que tienes hasta el momento para poder darte una ayuda.
    – Ragnar
    Commented el 24 feb. 2021 a las 15:47
  • Agrega tu JS también @Cesar. Commented el 24 feb. 2021 a las 19:00
  • Ya adjunte todo el código que tengo, por el momento no he escrito nada den JS Commented el 24 feb. 2021 a las 19:52
  • Lo mas fácil, como tu lo planteas, es deshabilitar el boton, quizas un mensaje de "Espere por favor..." y no mucha mas complicación. Commented el 25 feb. 2021 a las 4:17

2 respuestas 2

1

Al elemento <form> puedes agregarle una propiedad onsubmit, que se ejecuta al enviar el formulario. Ahi puedes deshabilitar el botón para que no sea clicable:

<form onsubmit="myButton.disabled = true; return true;">

El return true de después es para seguir con el submit normal del formulario tras deshabilitar al botón.

Sólo te faltaria tener la referencia al botón en myButton, o puedes substituirlo por document.getElementById('id') y ponerle un id al botón.

1

Muchas alternativas:

  1. Despues de dar click en enviar o onsubmit limpia tus campos y valida que los campos esten llenos o almenos uno lo este.
  2. Al dar click en enviar o onsubmit muestra un modal que ocupe toda la pantalla encima del form con un mensaje que diga "procesando, porfavor espere" o lo que desees poner:

 <div style="width:100vw;height:100vh;position:fixed;background-color:rgba(0,0,0,.5);"><div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center">Porfavor Espere</div></div>
3. Al dar click en el boton enviar usar .addClass("press"); para asignarle el class press, y antes de procesar el formulario verifica que el boton no tenga el class "press" con .hasClass("press") y si algo paso y no se pudo procesar el formulario usa .removeClass("press"); para eliminar el class "press" y asi el formlulario pueda ser procesado

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.