Nueva pregunta

Pregunta:

 
  5  
 
 
Luis Cortés Karma: 177 Costa Rica
 
 Fecha: 22-01-2016 18:10:36 (En Español)

Evitar Doble Submit PHP[Resuelta]

Hola tengo un problema con el doble envió en formularios, encontré una solucion pero no siempre funciona o tal vez no es la forma correcta
<button type="submit" name="enviar" class="btn btn-primary" data-loading-text="Cargando..." data-complete-text="Completado" onclick="$(this).button('loading').siblings().prop('disabled', false);">Cancelar Abono</button>

no siempre me funciona
existe una manera correcta para prevenir esto en php y cuales opciones existen que sean mas confiables Etiquetas: HTML - JQuery - MySQL - PHP Votos: 5 - Respuestas: 6 - Vistas: 29 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      6  
     
     
    Fernando Mosquera Karma: 10241 Argentina
     
    Fecha: 23-01-2016 04:01:34 Hola Luis, el doble submit se te produce porque el usuario hace varias veces clic en tu boton o por algún otro motivo? si es por un tema de usuario, simplemente en el onclick ocultas por Javascript el botón y mostra un gif de loading, una vez que se recargue la página volverá a aparecer el botón.

    Saludos,       Votos: 6 - Link respuesta
     
  •  
      10  
     
     
    Walter Sánchez Karma: 6600 Argentina
     
    Fecha: 23-01-2016 15:48:38 Hola
    Me ha interesado tu pregunta ya que es muy frecuente.
    Es verdad, algunos usuarios impacientes le dan al botón enviar constantemente por no esperar ha que se procese la información y muchas veces se generan muchas entradas de datos replicados, que es otro tema a tratar.

    Tomando como punto de partida lo mencionado por Fernando y con mis escasos conocimientos, tratare de acercar una solucion posible.

    Recién estuve haciendo algunos códigos de pruebas con javascript.

    Archivo del formulario: "index.html"

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario</title>
    <script>
        function enviar(){
            // Mustro un mensaje que se esta enviando la data
            document.getElementById("mensaje").innerHTML = "<h3>Enviando Datos.... Espere!<h3/>";
                      
            var ElementoRemover= document.getElementById('BotonSend'); // Quito el Boton Enviar
            ElementoRemover.removeAttributeNode;
            padre = ElementoRemover.parentNode;
            padre.removeChild(ElementoRemover);
           
            // envio del formulario
            formulario.action='procesar.php'; // Defino el action
            formulario.method='post'; // Defino el metodo de envio
            formulario.submit(); // Envio los datos
}
        
    </script>
</head>
<body>

   <div id="mensaje"></div>

    <form  id="formulario" name="formulario" >
    <label for="nombre">Nombre:</label>  
    <input type="text" id="campo1" name="nombre" />
    <br/>
     <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
    <br/>
   <input type="button" id="BotonSend" value="Enviar" onclick="enviar()" />
</form>
</body>
</html>




    Archivo para procesar los datos del formulario: "procesar.php"

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Datos procesados</title>
    </head>
<body>

<?php
echo "<h3>Los datos ingresados son:</h3><hr/>";
echo "Nombre: ".$_POST['nombre'];
echo "<br/>";
echo "Email: ".$_POST['email'];
?>   
</body>
</html>



    Centrando la atención a lo que solicitas, sobre Archivo del formulario: "index.html"
    Cuando el usuario presiona el boton de enviar se ejecuta una función de javascript llamada enviar()

    Esta función hace 3 cosas.
    1- Muestra en el DIV mensaje que se esta enviando los datos.
    2- Quita del DOM el boton Enviar
    3- Ejecuta el submit() para enviar los datos a procesar.php
    La definición de Action y method lo hago en el mismo javascript cosa que tambien se puede definir el en el mismo formulario sin usar javascript

    <form action="procesar.php" method="post">

    Y se quitaria las lineas de javascript 
                formulario.action='procesar.php'; // Defino el action
            formulario.method='post'; // Defino el metodo de envio


    Si en vez de quitar el botón enviar quiero eliminar todo el formulario
    En el codigo javascript reemplazo la linea
    var ElementoRemover= document.getElementById('BotonSend'); // Quito el Boton Enviar

    Por:
     var ElementoRemover= document.getElementById('formulario'); // Quito el Formulario


    En otras palabras en document.getElementById('formulario');
    reemplazo el ID del elemento a quitar del DOM 'formulario' o 'BotonSend'

    También es posible ocultar los elementos del DOM en vez de quitarlos, a mi me gusta mas quitarlos para que no sean manipulados arbitrariamente por el usuario.


    Un mejor mecanismo para evitar el envio es hacer las validaciones del lado del servidor con php.


    Espero que te sirva mi aporte

    Alguien mas podra aportar mejores soluciones a tu caso

    Saludos       Votos: 10 - Link respuesta
     
  •  
      3  
     
     
    Anonimo Anonimo Karma: -4 No especificado
     
    Fecha: 24-01-2016 03:35:43 Buenos días, si te hace doble submit "solo", sin que el usuario haga click varias veces, cambiá el input type="submit" por button, si estás utilizando javascript o jQuery, obviamente y tampoco encerrarlo dentro de una etiqueta form. A no ser que utilices serialize() de jQuery. No se si es clara la respuesta y no se si entendí la pregunta. Saludos   Votos: 3 - Link respuesta
     
  •  
      3  
     
     
    Luis Cortés Karma: 177 Costa Rica
     
    Fecha: 24-01-2016 06:10:09 Gracias a todos por contestar a mi consulta, Don Walter su solución me ha sido de gran ayuda el único problema que en el el archivo que procesa el formulario lo recibe este código
    if(isset($_POST['RegistrarAbono']))

    así que no ejecuta el formulario ya que necesita el name="RegistrarAbono"       Votos: 3 - Link respuesta
     
  •  
      5  
     
     
    Chrismart Anji Karma: 1473 México
     
    Fecha: 24-01-2016 22:47:48 Luis Cortes tan simple como esto n.n 

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Disabled Form Or Click</title>
	<script type="text/javascript">

	// usando javascript
	window.addEventListener("load", function() {
    input = document.getElementById("id");
    input2 = document.getElementById("ids");
    input.addEventListener("click", clicked, false);
    input2.addEventListener("click", clicked2, false);
});

function clicked() {
document.getElementById("id").disabled = true;
}
function clicked2() {
document.getElementById("ids").disabled = true;
}
</script>
</head>
<body>
<input id="ids" name="name="RegistrarAbono" type="submit" value="Clickeame 2 Veces xD" />
<button name="RegistrarAbono" type="submit" id="id">Clickeame 2 Veces xD</button>
</body>
</html>

    este es codigo quo paraa evitar el doble o tiple ect ect de click solo uno y ya o igual se puede modificar para contar los click y a base esto ponerle disabled, tambien lo puedes hacer en jQuery entre otra librerias como gustes n.n
    Espero te haiga ayudado n.n
    Saludos.       Votos: 5 - Link respuesta
     
  •  
      5  
     
     
    Luis Cortés Karma: 177 Costa Rica
     
    Fecha: 26-01-2016 08:08:13 Chrismart Anji, esta bien por que eso es lo que se quiere pero si haces eso no procesa el formulario el codigo de don walter esta perfecto solo que si añades un estructura de control como esta
    if(isset($_POST['enviar'])){
	echo "<h3>Los datos ingresados son:</h3><hr/>";
	echo "Nombre: ".$_POST['nombre'];
	echo "<br/>";
	echo "Email: ".$_POST['email'];
}

    no va a procesar el formulario       Votos: 5 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com