Submit Form without Page Refresh – PHP/jQuery

Written by Rahul, Updated on February 12, 2018

Day by day increasing traffic on the Internet and optimizing web experiences, we are committed to improve our web application by providing a better user interface and reduce Internet traffic. In this scenario, This is useful if we submit our web forms without page reload. This reduces the load on the Internet to reload the entire web page.

This article will help you to create a web form which will submit without reloading page and do the background processes and return values back to the page.

View Demo

Download

1. Main Web Page –

Create and index.html file on your website using following content. This is the main html form which will display on website page. You can simply integrate form to any website page.

<html>
<title>Submit Form without Page Refresh - PHP/jQuery - TecAdmin.net</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/submit.js"></script>
</head>
<body>
  <form id="myForm" method="post">
     Name:    <input name="name" id="name" type="text" /><br />
     Email:   <input name="email" id="email" type="text" /><br />
     Phone No:<input name="phone" id="phone" type="text" /><br />
     Gender:  <input name="gender" type="radio" value="male">Male
	      <input name="gender" type="radio" value="female">Female<br />

    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
   </form>
   <br/>
   Your data will display below..... <br />
   ==============================<br />
   <div id="results">
   <!-- All data will display here  -->
   </div>
</body>
</html>

2. Create JavaScript –

Now create a JavaScript page with name submit.js inside js directory using following content. You can optimize this JavaScript by adding the jQuery validations.

function SubmitFormData() {
    var name = $("#name").val();
    var email = $("#email").val();
    var phone = $("#phone").val();
    var gender = $("input[type=radio]:checked").val();
    $.post("submit.php", { name: name, email: email, phone: phone, gender: gender },
    function(data) {
	 $('#results').html(data);
	 $('#myForm')[0].reset();
    });
}

3. Create PHP Script –

Now create a PHP script named submit.php. This script will do all your backed operation. When we submit the web form, This script will get all argument from the POST. You can customize this script according to your requirement like save values in the database, Email records to Admin etc.

<?php
  echo $_POST['name'] ."<br />";
  echo $_POST['email'] ."<br />";
  echo $_POST['phone'] ."<br />";
  echo $_POST['gender'] ."<br />";
  echo "==============================<br />";
  echo "All Data Submitted Successfully!";
?>

4. Testing –

Now access index.html page on web browser and test this example. You can also view this demo.

Rahul

I, Rahul Kumar am the founder and chief editor of TecAdmin.net. I am a Red Hat Certified Engineer (RHCE) and working as an IT professional since 2009..

14 Comments

Gilbert Njoroge Reply to Gilbert
May 23, 2019 at 2:06 pm
Thank you Genius. This was really helpful…
Chris Reply to Chris
September 15, 2018 at 6:30 am
This is really great and simple tutorial! Thank you for sharing your knowledge!
keshav dev Reply to keshav
July 29, 2018 at 8:37 am
great work …. helpfull for alll………….
Den Reply to Den
April 1, 2018 at 3:41 am
Hello! You can use our professional web design services to improve your online business and website conversions. 8+ years of successful work, reasonable pricing. Please, confirm the request to find out more.
Jay Reply to Jay
November 13, 2017 at 1:52 pm
Hi Rahul, This is a great tutorial on the web for newbies like me. However, in my PHP application I have a PHP page with multiple forms. Data submitted on one form generates data elements from the backend MySQL database to be used by another form on the same page. If the submit.php is a different page, how can I get the data elements accessible on the original page? Using $_SESSION or $_COOKIE variables is possible of course but since there are a large number of these data elements, I was wondering if there is a more elegant way of achieving the same result. No page refresh onsubmit and yet result of one form being accsssible to the second form on the same PHP page.
Thanks a lot in advance.
Marc Reply to Marc
October 22, 2017 at 6:33 am
Hi,
is it possible to add a file upload to the form and to specify the location where it should be stored on the server?
bizhan Reply to bizhan
July 21, 2017 at 7:36 am
Hello. I used this piece of code and it was actually great. thank you.
Php Professional Reply to Php
June 15, 2017 at 4:45 am
Great tutorial. This tutorial was really helpful to create a submit form without page refreshing on my business site. Its helpful to beginners.Thanks.
Liam Reply to Liam
December 30, 2016 at 7:22 am
Is this Ajax? If not, what does Ajax have over this?
Dan Reply to Dan
December 28, 2015 at 10:56 pm
Hello,
Thanks for the great tutorial. In Item #3 you are missing the ending semi-colon. “;”.
Current:
echo “All Data Submitted Successfully!”
Should Be:
echo “All Data Submitted Successfully!”;
- Rahul Reply to Rahul
  December 29, 2015 at 6:49 am
  Thanks Dan,
  We have corrected the missing semi-colon issue as per your information.
Alan Reply to Alan
October 17, 2015 at 6:50 am
Your demo works nicely, but your source code doesn’t work.
- Rahul Reply to Rahul
  October 20, 2015 at 4:30 am
  Hi Alan,
  Out team has tested the source code and its working properly.
  Put this code under website document and test. Code is working on web url like http://localhost/demo/ etc.
  - Alan Reply to Alan
    October 20, 2015 at 4:33 am
    Yes, it is my bad. I’ve got it working eventually.