December 18, 2023 5:04 am

Submit a form without page refresh PHP & jQuery

In this tutorial we have a simple form with name, email & phone number. The form submit all fields to a PHP script without page refresh, using native jQuery method (native meaning, you don’t need to download any extra plugins to make it work.

[wpdm_file id=4]

First of all you need to make a HTML form.

HTML Code

Simple HTML Code

<form action="submit.php"  method="post">
 Name: <input name="name" id="name" type="text" /><br />
 Email: <input name="email" id="email" type="text" /><br />
 Phone Number: <input name="phone" id="phone" type="text" /><br />
 <input type="button" id="searchForm" onclick="SubmitForm();" value="Send" />
 </form>

 JavaScript Code

Simple JavaScript Code

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
function SubmitForm() {
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
$.post("submit.php", { name: name, email: email, phone: phone },
   function(data) {
     alert("Data Loaded: " + data);
   });
}
</script>

JavaScript Library Include

<script src="http://code.jquery.com/jquery-latest.js"></script>

 PHP Code

Simple PHP Action File

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

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

14 responses to “Submit a form without page refresh PHP & jQuery”

  1. irfan says:

    HI, i got help from the above mentioned code,its really v nice. thanks…. 🙂

  2. Somehow feels great, But you could have made this code more clean and more clear.

    It’s great in this case as well.

    I want you to prevent click so that page may avoid refreshing.

    user following section to prevent refreshing your page.

    return false;

    at the end of your function before “}”,

    Or you may use e.preventDefault();

    Hope you will change your code to this.

  3. herizal amin says:

    nice example.., thanks

  4. Rajesh .S says:

    thanks

  5. Kingsly says:

    Good Example

  6. Hello Guys,

    This is look great, but I can’t download the download file. Anyone can send me the zip file? I register to your feedburner but looks that area have error..

    Thank you

  7. Ajay Kumar says:

    Thanks Dear… it was very much helpfull

  8. yup says:

    paki oye

  9. ayaya says:

    esto no funsiona me parese a mi ke esto es vasura porke pornes esta bazofia pequenyo trozo de mierda al sol

  10. rashida says:

    code for writing comments and updating on the page immediately

  11. shoaib says:

    thanks buddy

  12. asfaq says:

    worst code ever making fool don,t downloas

  13. Jeremy says:

    Thanks. It looks pretty simple.

Leave a Reply

Your email address will not be published. Required fields are marked *