How to Submit a Form Submit Without Page Refresh Using AJAX & PHP in Browser

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

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</form>

</div>

</body>

</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

$(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);
      }
    );
  });
});

$(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

<?php

echo $_POST['firstname'];

echo $_POST['lastname'];

?>

<?php

echo $_POST['firstname'];

echo $_POST['lastname'];