Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 20, 2023

 

 

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

 

 

JavaScript
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

 

 

PHP
1
2
3
4
5
6
7
<?php
 
echo $_POST['firstname'];
 
echo $_POST['lastname'];
 
?>

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme