Saltar al contenido

Cómo procesar un formulario con PHP y AJAX

17 agosto, 2017
Procesar un formulario usando PHP, JS y AJAX.

En este post te enseñaremos cómo es que puedes procesar un formulario con PHP y AJAX, es decir, sin que se recargue la página y se haga al instante. ¡ENTRA!

 

INICIAMOS:

Vengo con otro tutorial, y esta vez va enfocada en el área de PHP: cómo procesar un formulario usando AJAX y que PHP procese y haga algo con esos datos.

Como sabrás, a veces, cuando das clic a un botón se recarga un sitio web, y es algo que podemos evitar. Claro, a veces sí es necesario recargar, pero cuando no, podemos hacer los procesos de una manera muy intuitiva y más funcional: sin que se recargue la página. Sin más que decir, ¡vamos al tutorial!

Tutorial: cómo procesar un formulario con PHP y AJAX

Para este ejemplo, vamos a tener 3 archivos:

  1. El index.php, o nuestra página donde estará el formulario.
  2. El js/proceso.js, que es donde estará el AJAX.
  3. El server.php, que será nuestro proceso central.

Muy bien, nuestro index.php contendrá lo siguiente:

<!DOCTYPE html><!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Procesando datos con Master Coria</title> <style> form{ width:50%;margin: 0 auto; } input[type="text"], input[type="password"]{ width:50%;padding:10px;margin-top:10px;margin-bottom:10px; } input[type="button"]{ padding:10px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head><body> <form method="post"> <input type="text" id="nombre" placeholder="Tu nombre ..." /> <input type="text" id="correo" placeholder="Tu correo ..." /> <input type="password" id="clave" placeholder="Tu clave ..." /> <input type="password" id="clave_repetir" placeholder="Repetir clave ..." /> <input type="button" id="enviar" value="Enviar datos" onclick="enviarDatos();" /> </form> <div id="resultado" style="text-align:center;"> </div> <script src="js/proceso.js"></script> </body></html>

Por otro lado, el archivo js/proceso.js tendrá lo siguiente:

function enviarDatos(){function enviarDatos(){
var nombre = document.getElementById("nombre").value;var correo = document.getElementById("correo").value;var pass = document.getElementById("clave").value;var pass2 = document.getElementById("clave_repetir").value;$("#resultado").html("Cargando ...");$("#enviar").prop("disabled", true);
setTimeout(function(){if(nombre == ""){ $("#resultado").html("Campo nombre requerido."); $("#enviar").prop("disabled", false);} else if(correo == ""){ $("#resultado").html("Campo correo requerido."); $("#enviar").prop("disabled", false);} else if(pass == ""){ $("#resultado").html("Campo contraseña requerido."); $("#enviar").prop("disabled", false);} else if(pass2 == ""){ $("#resultado").html("Campo contraseña 2 requerido."); $("#enviar").prop("disabled", false);} else if(pass != pass2){ $("#resultado").html("Las contraseñas no coinciden."); $("#enviar").prop("disabled", false);} else {$.ajax({ type: "post", url: "server.php", data:{name:nombre,email:correo,clave:pass}, success:function(resultado){ $("#resultado").html(resultado); $("#enviar").prop("disabled", false); }}).fail(function(){ $("#resultado").html("Ocurrió un error."); $("#enviar").prop("disabled", false);});}}, 1500);
}

Y el archivo server.php hará las acciones con esos datos:

<?php

echo "Tu nombre es: " . $_POST['name'] . "<br />Tu correo es: " . $_POST['email'] . "<br />Tu contraseña es: " . $_POST['clave'] . "<br /><b>CUENTA CREADA!</b>";

?>

Este programa sólo devuelve los datos que se le introdujeron en el formulario. Si uno de ellos se deja en blanco, se le notificará al usuario. Nótese que el resultado AJAX se imprimen en el div con el identificador “resultado”. Cumplimos nuestro objetivo: PROCESAR LOS DATOS SIN QUE SE RECARGUE LA PÁGINA.

Te recomendamos:  5 consejos para programar de noche

Para poder correr este código en tu computador, es necesario tener un SERVIDOR LOCAL corriendo en tu PC, ya sea Windows, Debian o Mac, puedes hacerlo. Ya que AJAX no permite ejecutarse en direcciones tipo “file://”.

Puedes modificar a tu antojo el código fuente. Si prefieres descargarlo limpio y ordenado a copiarlo, te dejo un enlace de descarga del mismo:

DescargarDescargar código fuente

¿Dudas, preguntas?
Espero haberte ayudado y espero que hayas concluido con la publicación. Si no entiendes algo, contacta a nuestro equipo usando el chat flotante (ubicado en la parte inferior derecha de tu pantalla) para dejarnos tu pregunta.

Puedes ver nuestros posts más recientes en nuestra página inicio del blog. Danos like en nuestra página de Facebook para que no te pierdas ninguna novedad.

¡BUEN DÍA Y SALUDOS POR PARTE DE NUESTRO EQUIPO!