[SOLUCIONADO] Submit con delay

[djboro88]

Hola a todo@s, me gustaria crear un form, pero que al hacer click en submit, tardara unos segundos en enviar.

Es decir yo tengo este form:

Código HTML:

<form action="./" method="POST" id="form1">
<input type="text" name="nombre">
<input type="text" name="apellidos">
<button type="submit" class="envio" name="enviado" onclick="javascript:enviar();">Enviar</a>
</form> 

Y la funcion "enviar()" en JS es esta:

Código HTML:

<script>
function enviar() {	
        setTimeout(function(){ 
               <?php //Enviar a BD
               $nombre = $_POST['nombre'];
               $apellidos = $_POST['apellidos'];
               mysqli_query($con,"INSERT INTO usuarios ('nom','ape') VALUES('$nom', '$ape')");
               ?>		

	}, 5000);
    } 

¿Alguna razon por la que no funciona? Gracias !!

PD: Lo he intentado con:

Código HTML:

<a href="#" onclick="javascript:enviar();">BOTON</a> 

Y añadiendo al JS:

Código HTML:

document.getElementById('form1').submit()

Pero no envia los campos por POST.

[IsaBelM]

la parte php nunca se ejecutará. has de enviar los datos a un archivo php, bien sea de la manera convencional o con ajax. en tu caso con ajax.

para que el temporizador surta efecto, cambia el tipo de botón submit por button

[Alexis88]

No puedes ejecutar el guardado de datos de esa manera. Necesitas enviarlos para poder obtenerlos de $_POST y luego ya podrás procesarlos.

Lo que tendrías que hacer es simple. Primero, en lugar del <button>, coloca un <input> de tipo submit, que es el botón natural de un formulario para enviar su información, luego, cuando se produzca el evento submit, que es el que ocurre cuando envías los datos del formulario a procesarse, lo cancelas con el método preventDefault, aplicas el método temporizador setTimeout para enviar la información luego de un determinado tiempo y, finalmente, utiliza el método submit para hacer el envío de la información.

Esto debe de ir en la cabecera del formulario:

Código HTML:

<form action="./" method="POST" id="form1" onsubmit="enviar(event, this)">
 

Y este es el script para aplicar el efecto de retraso:

Código Javascript:

function enviar(evento, formulario){
    evento.preventDefault(); //Cancelo el envío
    setTimeout(function(){ //Aplico el temporizador
        formulario.submit(); //Envío los datos
    }, 5000);
}
 

Y como veo que piensas procesar los datos en el mismo archivo, necesitas una condición que verifique que has recibido datos medianto el método POST.

Código PHP:

if ($_POST){
    //Ejecutas el código para guardar la información
}
 

Solo como un consejo, evita mezclar código de distintos lenguajes de esa manera. Es preferible y más ordenado tener el código PHP en un archivo con extensión .php, el código JavaScript en un archivo con extensión .js y así con los demás.

Saludos