Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
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

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme