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.
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.
functionSubmitFormData() { var name = $("#name ").val(); var email = $("#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.
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!
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();
}
}
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!
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?
Thank you Genius. This was really helpful…