Welcome folks today in this blog post we will be submitting the form
without page refresh
using ajax
and php
in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form method="post"> <input type="text" name="firstname" id="firstname" placeholder="Enter the FirstName" required> <input type="text" name="lastname" id="lastname" placeholder="Enter the lastname" required> <button type="submit">Join</button> </form> <div id="result"> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="script.js"></script> </html> |
As you can see we are including the jquery
cdn and then we have the simple html
user form where we have two input
fields where we allow the user
to enter the firstname
and lastname
and then we have the submit
button to join the firstname
and lastname
together.
And now we need to make the script.js
file and copy paste the following code
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(document).ready(function () { $("form").submit((event) => { event.preventDefault(); let firstname = $("#firstname").val(); let lastname = $("#lastname").val(); $.post( "process.php", { firstname: firstname, lastname: lastname, }, (data) => { console.log(data); $("#result").html(data); } ); }); }); |
As you can see in the above javascript
code we are fetching the firstname
and lastname
and then we are using the ajax
to make the post
request to the process.php
script to send this data
to the php script and then we have the callback
function where we receive the result
from the script
and then we are displaying the data in the browser.
Now we need to make the process.php
file and copy paste the following code
process.php
1 2 3 4 5 6 7 |
<?php echo $_POST['firstname']; echo $_POST['lastname']; ?> |