In this post we will show you how you can process a form with PHP and AJAX, that is to say, without the page reloading and is done instantly. ENTERS!
WE START:
I come with another tutorial, and this time it is focused on the area of PHP: how to process a form using AJAX and have PHP process and do something with that data.
As you know, sometimes when you click a button a website reloads, and it is something that we can avoid. Sure, sometimes it is necessary to reload, but when not, we can do the processes in a very intuitive and more functional way: without the page reloading. Without more to say, let's go to the tutorial!
Tutorial: how to process a form with PHP and AJAX
For this example, we will have 3 files:
- The index.php, or our page where the form will be.
- The js / process.js, which is where the AJAX will be.
- The server.php, which will be our central process.
Alright, our index.php will contain the following:
<!DOCTYPE html><!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Processing data with 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" action=""> <input type="text" id="nombre" placeholder="Your name ..." /> <input type="text" id="correo" placeholder="Your email ..." /> <input type="password" id="clave" placeholder="Your password ..." /> <input type="password" id="clave_repetir" placeholder="Repeat password ..." /> <input type="button" id="enviar" value="Send data" onclick="enviarDatos();" /> <input type="hidden" name="trp-form-language" value="en"/></form> <div id="resultado" style="text-align:center;"> </div> <script src="js/proceso.js"></script> </body></html>
On the other hand, the js / process.js file will have the following:
function sendData () {function sendData () {var name = document.getElementById ("name"). value; var mail = document.getElementById ("mail"). value; var pass = document.getElementById ("key"). value; var pass2 = document.getElementById ("repeat_key"). value; $ ("#result"). html ("Loading ..."); $ ("#enviar"). prop ("disabled", true); setTimeout (function () {if (name == "") {$ ("#result"). html ("Field name required."); $ ("#enviar"). prop ("disabled", false);} else if (mail == "") {$ ("#resultado"). html ("Mail required field."); $ ("#enviar"). prop ("disabled", false);} else if (pass == " ") {$ (" #result "). Html (" Required password field. "); $ (" #enviar "). Prop (" disabled ", false);} else if (pass2 ==" ") {$ (" 1TP3Result "). Html (" Password field 2 required. "); $ (" #enviar "). Prop (" disabled ", false);} else if (pass! = Pass2) {$ (" #result "). Html ( "Passwords do not match."); $ ("#enviar"). Prop ("disabled", false);} else {$.ajax ({type: "post", url: "server.php", data: { name: name, email: email, password: pass}, success: function (result) {$ ("#resultado"). html (result); $ ("#enviar"). prop ("disabled", false);}} ) .fail (function () {$ ("#result"). html ("An error occurred."); $ ("#enviar"). prop ("disabled", false);});}} , 1500); }
And the file server.php will do the actions with that data:
<?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>"; ?>
This program only returns the data that was entered in the form. If one of them is left blank, the user will be notified. Note that the AJAX result is printed in the div with the identifier "result". We fulfill our objective: PROCESSING THE DATA WITHOUT THE PAGE RELOADING.
In order to run this code on your computer, it is necessary to have a LOCAL SERVER running on your PC, either Windows, Debian or Mac, you can do it. Since AJAX does not allow to execute in addresses type "file: //".
You can modify the source code at will. If you prefer to download it clean and tidy than copy it, I leave you a download link:
You can see our most recent posts on our page start from the blog. Like us on our Facebook page so you don't miss any news. GOOD MORNING AND GREETINGS FROM OUR TEAM!