Facebook Twitter Instagram
    TecAdmin
    • Home
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    You are at:Home»Programming»PHP»Submit Form without Page Refresh Using PHP/JQuery

    Submit Form without Page Refresh Using PHP/JQuery

    By RahulMay 22, 20233 Mins Read

    In the vast realm of web development, creating a user-friendly experience is paramount. One way to enhance user experience (UX) is by streamlining the form submission process. Traditional form submission requires a page refresh to process data, which can be frustrating and time-consuming for the user. With PHP and jQuery, it’s possible to overcome this issue and submit forms without page refresh. This article explores this technique, providing a step-by-step guide to improve your website’s UX.

    Advertisement

    What is PHP?

    PHP (Hypertext Preprocessor) is a server-side scripting language that is particularly well-suited for web development. It enables the creation of dynamic and interactive web pages, often used in conjunction with databases to create functional, data-driven websites.

    What is jQuery?

    jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation simpler with an easy-to-use API that works across a multitude of browsers. With its combination of versatility and extensibility, jQuery has revolutionized the way millions of people write JavaScript.

    How Does PHP and jQuery Work Together?

    The combination of PHP and jQuery can create powerful and dynamic web applications. PHP, as a server-side language, processes data on the server and interacts with databases. jQuery, on the other hand, operates on the client side and can create dynamic effects and changes on the web page without the need for a page refresh.

    When we talk about form submission without a page refresh, we’re discussing AJAX. AJAX, or Asynchronous JavaScript and XML, allows web pages to update asynchronously by exchanging data with a web server behind the scenes. In simpler terms, AJAX allows parts of a web page to update without needing to reload the entire page.

    Let’s now explore a simple way to submit a form without page refresh using PHP and jQuery.

    Step-by-Step Guide

    Step 1: Create HTML Form

    Create a 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.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <html>
    <title>Submit Form without Page Refresh Using PHP/jQuery</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>

    Step 2: Create JavaScript File

    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.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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();
        });
    }

    Step 3: PHP Form Processing

    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.

    1
    2
    3
    4
    5
    6
    7
    8
    <?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

    That’s it! You’ve now successfully created a form that submits without refreshing the page. This technique can significantly streamline UX by providing users with a smoother, faster response to their form submissions. With some practice, you can easily implement this PHP/jQuery strategy in more complex applications, contributing to an efficient and user-friendly web development landscape.

    form html jquery PHP
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp

    Related Posts

    How to Schedule a Cron Job for PHP: A Step-by-Step Guide

    How to Compare Two Array Values in PHP: A Practical Guide

    How to Set Up Apache, MySQL, and PHP on macOS: A Comprehensive Guide

    View 21 Comments

    21 Comments

    1. Anne on October 4, 2020 5:33 am

      i downloaded this souce code but it doesnt work

      Reply
      • ADITYA on December 4, 2021 11:11 am

        index,html ko index.php likh de fir kam karega

        Reply
    2. Robert Forte on September 27, 2020 12:09 am

      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 November 11, 2019 7:05 pm

      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 July 28, 2019 2:09 pm

      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 September 25, 2019 4:47 pm

        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 July 15, 2019 3:33 pm

      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
    6. Gilbert Njoroge on May 23, 2019 2:06 pm

      Thank you Genius. This was really helpful…

      Reply
    7. Chris on September 15, 2018 6:30 am

      This is really great and simple tutorial! Thank you for sharing your knowledge!

      Reply
    8. keshav dev on July 29, 2018 8:37 am

      great work …. helpfull for alll………….

      Reply
    9. Den on April 1, 2018 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.

      Reply
    10. Jay on November 13, 2017 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.

      Reply
    11. Marc on October 22, 2017 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?

      Reply
    12. bizhan on July 21, 2017 7:36 am

      Hello. I used this piece of code and it was actually great. thank you.

      Reply
    13. Php Professional on June 15, 2017 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.

      Reply
    14. Liam on December 30, 2016 7:22 am

      Is this Ajax? If not, what does Ajax have over this?

      Reply
    15. Dan on December 28, 2015 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!”;

      Reply
      • Rahul on December 29, 2015 6:49 am

        Thanks Dan,

        We have corrected the missing semi-colon issue as per your information.

        Reply
    16. Alan on October 17, 2015 6:50 am

      Your demo works nicely, but your source code doesn’t work.

      Reply
      • Rahul on October 20, 2015 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.

        Reply
        • Alan on October 20, 2015 4:33 am

          Yes, it is my bad. I’ve got it working eventually.

          Reply

    Leave A Reply Cancel Reply

    Advertisement
    Recent Posts
    • Setting and Getting the Default Timezone in Python
    • What is Media Access Control (MAC) Address?
    • What is Cross-Site Scripting (XSS)?
    • What is Content Security Policy (CSP)?
    • A User’s Guide to Understanding Redirection Operators in Bash
    Facebook Twitter Instagram Pinterest
    © 2023 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.