Submit Form without Page Refresh – PHP/jQuery

    RahulBy 3 Mins ReadUpdated:

    When submitting a form, users expect a seamless user experience. Even the tiniest disruption in the browsing experience can lead to a drop in conversion rate. Suppose your website has multiple small forms that require users to input personal details, addresses, and other sensitive information. In that case, you need to consider implementing AJAX validation and autosave features to reduce the risk of users losing their data.

    This blog post will teach you how to create an AJAX form without page refresh with PHP and jQuery. You will also be able to implement autosave features for your website visitors and see examples of how best practices can be implemented in real-life scenarios. Let’s get started!

    1. Main Web Page

    Create and index.html file on your website using following content. This is the main HTML form that will display on the website page. You can simply integrate a form into 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 operations. When we submit the web form, This script will get all arguments from the POST. You can customize this script according to your requirement like saving 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.

    Conclusion

    AJAX forms are an essential part of modern web application development and can be used to improve the user experience by decreasing the time required to submit data. The technology behind AJAX forms has progressed greatly over the past few years, especially with the advent of more powerful JavaScript frameworks that provide additional functionality and ease of use. It is important to note that the benefits of using an AJAX form are not limited to websites. In fact, the same concepts can be applied to create a mobile app with a responsive user interface. This is why it’s important to understand the basics of creating an AJAX form and the advantages that come with it.

    Share.

    Related Posts

    21 Comments

    2. Robert Forte on

      Thanks so much Rahul! This is something I could build on.
      But I have the same question as above: Is this Ajax? If not, why use Ajax:

      Reply
    3. Pat on

      Thanks for this! However, I noticed that if i have 2 input radio, instead of 1 as in your demo, it will echo the 1st one it finds twice. How to edit the script so any subsequent radio inputs are trewated seperatly ?

      Thanks!

      Reply
    4. Michael on

      This work perfect except that the page refreshed when I pressed ENTER.

      After a while I found the function preventDefault(); in javascript. Just want to share this to future users reading the article.

      I solved it like this:

      function enterKey (){
      if (event.key == “Enter”){
      event.preventDefault();
      SubmitFormData();
      }
      }

      Reply
      • James on

        Michael,

        Thanks for posting. I’m new to javascript. This article is really helping me out. I am also having he ENTER issue. Can you somehow incorporate your solution into the syntax of the article?

        function enterKey (){
        if (event.key == “Enter”){
        event.preventDefault();
        SubmitFormData();
        }
        }

        inside or outside the javascript in the article? I don’t know where to put it. Thanks!

        Rahul, this is awesome!

        Reply
    5. Esa on

      When i try to submit hours in the form, it does not display using this method. However, using the traditional submit method, the hours do show up when being echo. Any advise?

      Reply
    9. Den on

      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.

      Reply
    10. Jay on

      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.

      Reply
    11. Marc on

      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?

      Reply
    13. Php Professional on

      Great tutorial. This tutorial was really helpful to create a submit form without page refreshing on my business site. Its helpful to beginners.Thanks.

      Reply
    15. Dan on

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

      Reply

    Leave A Reply