Submit Form without Page Refresh – PHP/jQuery

Day by day increasing traffic on 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 load on Internet to reload 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 page.
View Demo
Download

1. Main Web Page –

Create index.html page 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 jQuery validations in ti.
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 web form, This script will get all argument from POST. You can customize this script according to your requirement like save values in 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.

Thanks for Visit Here

Comments

Post a Comment