This tutorial will teach you about creating form that will submit information without refreshing the form page. Instead, an notification message will display on successful submission.
For this, we have created a HTML form in “refreshform.html” file.
Further, we have created a database named “mydba”
CREATE DATABASE mydba;
..................
and using PHP inserted form details into it.
$query = mysql_query("insert into TABLE NAME(column1, column2, column3) values ('$value1','$value2','$value3')"); //Insert query
As soon as you will click on the submit button, data will be sent to php script using $.post().
Syntax:
$(selector).post(URL,data,function(data,status,xhr),dataType)
At this moment, form page will not refresh instead, a notification will be delivered “Data Submitted successfully” on successful form submission.
HTML File – refreshform.html
- Consists of form with id =Â “form”.
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Without Refreshing Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="js/refreshform.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Without Refreshing Page</h2>
<!-- Required Div Starts Here -->
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<label>Email:</label>
<input id="email" placeholder="Your Email" type="text">
<label>Contact No.</label>
<input id="contact" placeholder="Your Mobile No." type="text">
<label>Gender:</label>
<input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female
<label>Message:</label>
<textarea id="msg" placeholder="Your message..">
</textarea>
<input id="submit" type="button" value="Submit">
</form>
</div>
</body>
</html>
jQuery File – refreshform.js
- Sends request to php script with form details. Return notification on successful data submission.
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contact").val();
var gender = $("input[type=radio]:checked").val();
var msg = $("#msg").val();
if (name == '' || email == '' || contact == '' || gender == '' || msg == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("refreshform.php", {
name1: name,
email1: email,
contact1: contact,
gender1: gender,
msg1: msg
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});
My-SQL Code
- My-SQL command for creation of database ‘mydba’ and table ‘form_elements’.
CREATE DATABASE mydba;
CREATE TABLE form_element (
id int(25) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
contact int(25) NOT NULL,
gender varchar(255) NOT NULL,
message varchar(255) NOT NULL,
PRIMARY KEY (id)
)
PHP File – refreshform.php
- Insert form information into database.
<?php
// Establishing connection with server by passing "server_name", "user_id", "password".
$connection = mysql_connect("localhost", "root", "");
// Selecting Database by passing "database_name" and above connection variable.
$db = mysql_select_db("mydba", $connection);
$name2=$_POST['name1']; // Fetching Values from URL
$email2=$_POST['email1'];
$contact2=$_POST['contact1'];
$gender2=$_POST['gender1'];
$msg2=$_POST['msg1'];
$query = mysql_query("insert into form_element(name, email, contact, gender, message) values ('$name2','$email2','$contact2','$gender2','$msg2')"); //Insert query
if($query){
echo "Data Submitted succesfully";
}
mysql_close($connection); // Connection Closed.
?>
Css File – refreshform.css
- Includes basic styling of form.
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#form{
background-color:#556b2f;
color:#D5FFFA;
border-radius:5px;
border:3px solid #d3cd3d;
padding:4px 30px;
font-weight:700;
width:350px;
font-size:12px;
float:left;
height:auto;
margin-left:35px
}
label{
font-size:15px
}
h3{
text-align:center;
font-size:21px
}
div#mainform{
width:960px;
margin:50px auto;
font-family:'Fauna One',serif
}
input[type=text]{
width:100%;
height:40px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px
}
textarea{
width:100%;
height:60px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px;
resize:none
}
input[type=radio]{
margin:10px 5px 5px
}
input[type=button]{
width:100%;
height:40px;
margin:35px 0 30px;
background-color:#f4a460;
border:1px solid #fff;
border-radius:3px;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px
}
Conclusion:
I hope this tutorial has given ins and out designing form that can submit data without refreshing. If you want to share your feedback, you can easily do it in the link given below.
51 Replies to “Form Submit Without Page Refreshing- jQuery/PHP”
This is my first time go to see at here and i am in fact pleasant to read everything at single place.
Hello! Mike,
Your feedback is highly appreciated. Always feel free to use FormGet in future too.
Thanks & Regards,
FormGet.com
You can also join us on :
facebook : https://www.facebook.com/FormGet?ref_type=bookmark
twitter : https://twitter.com/hashtag/formget
google plus : https://plus.google.com/+Formget
This is very help ful. it has provided alot of insight in dealing with form.
I am extremely grateful for your appraising words. For more information, do keep reading our blogs.
Thanks a ton! 🙂
AMAZING !!!! Helped me tremendously, managed to get my from submit and learned proper ways to refresh div after form submit, helped me with my forum implementation as well. Thanks again.
Hello! Gigi,
Your feedback is highly appreciated. Always feel free to use FormGet in future too.
Thanks & Regards,
FormGet.com
You can also join us on :
facebook : https://www.facebook.com/FormGet?ref_type=bookmark
twitter : https://twitter.com/hashtag/formget
google plus : https://plus.google.com/+Formget
Thanks…..
really easy and helpful content..
Thanks, this code is really helpful, but i have only one query: in js file what is function data and where you initialize that variable “data”?
Actually it is the function that will run when the request get succeeds.
When form information gets completely stored in database, php returns the successful message (echo “Data Submitted Successfully”).
and function receives it which is used to display in front end.
In …………function(data)
data : is the return message.
Helped me a lot. Was Working on Jquery without any hint about it. Perfect examples.
Thanks a Lot
Hello Anant,
Pleased with your response…!
Keep reading our blog posts for getting more coding tricks…
Nice Thanks.
Hello Pradeep,
Pleased with your response…!
Keep reading our blog posts for getting more coding tricks…
Thanks for the detailed information. You explanation is simple and pretty straight forward. It gave me clear view on how to integrate it in my website.
Deeply pleased with your response.
Regards,
FormGet Team.
Join Us On
Facebook : https://www.facebook.com/FormGet
Twitter : https://twitter.com/FormGetcom
Google Plus : https://plus.google.com/+Formget
I have been using this site and like it a lot, but would really appreciate if you could write the codes in new sqli or pdo form also
Hello Sam,
Thank you so much for such a kind appreciation. We suggestion is noted down and will be soon implemented.
Regards,
FormGet Team.
i want to know how to use AJAX for update
Hello Dil Nisha,
I can give you a brief introduction on it . From the above code as you can see, this is the ajax part :
$.post(“refreshform.php”, {
name1: name,
email1: email,
contact1: contact,
gender1: gender,
msg1: msg
}, function(data) {
alert(data);
$(‘#form’)[0].reset(); // To reset form fields
});
where $.post is the jquery ajax post method , in which first parameter is url(“refreshform.php”) to which the data needs to be sent .
And along with it some data(name,email,….etc) is sent for further process, after success of the process the data is returned from the second page (refresh.php) and is displayed in front end using alert(data).
Hope I have explained well. Keep following us for more knowledgeful posts.
Regards,
FormGet Team.
Thanks!
Hello Redbull,
Your Welcome ! Keep reading our other blog posts for getting more coding tricks.
Regards,
FormGet Team
Hello Zebra,
That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
Catch up new posts from here
Regards,
FormGet Team
Hello Aditya,
Pleased with your response !
Keep reading other blog posts for getting more coding tricks.
Regards,
FormGet Team.
Very well written, completely understandable. Thanks a lot and enjoy your day!
Hello Tom,
That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
Catch up new posts from here
Regards,
FormGet Team
Can the same data from the form be sent to an email instead of the database, if so can you please add the code for that.
Thank you
I’m looking for it too !
Its perfect. It contains all the information that is required to set it up. Thank u.
Thanks for your little but gigantic help …… by providing with what i have been look for so long … 😀 hope to see more interesting tutorials related to jQuery :D…..
This website is awesome!
Hey, nice work and well explained!
But i’m facing a problem,
I’m using your code not to insert a query to a database but run a php soap client script.
everything works well only when i want to retrieve the data it shows an empty box.
If you got the time, please contact me 🙂
Its Awesome dude.
thankyou very much sir was searching for this for a while .. !!
it worked flawlessly ..!! 🙂
I downloaded your code to test it out and see how it works. The issue im running into is, I can run all the downloaded code locally on my machine, but when I upload it to the server and try and run it, the JS is not recognizing my click.
and I know its enabled b/c it works just fine for all my other JS stuff I have for my other pages.
Any suggestions would be greatly appreciated.
Thanks
Hey man, thanks for these badass codes that that you’ve shared you really have saved my neck…
ill be looking forward to more of your future post.
thanks..
Its jst awsm, but would be appreciated more if we could know how to do the same for sending email…..
you just need to edit the “refreshform.php” man, instead of the sql data insertion codes replaced it with an email sending code something like these…
<?php
$to = "[email protected]";
$subject = $_POST['subj'];
$from = $_POST['rname']." “;
$message = $_POST[‘msg’];
$headers = “From: ” . $from ;
$body = $message;
mail($to, $subject, $body, $headers);
?>
and that would do the job…
Hope this worked for you…
=)
hey how can i display chat box data without refreshing page
Thanks man, very helpful 🙂
This tutorial is great!
I am new to Jquery and I’m always fascinated with how it works. This tutorial has transformed my use of CodeIgniter. Thanks a million.
Its amazing…!!! Thank u so muchhh….!!1
This is really good article !
Found very detailed description of what i needed..Thank you very much for posting such contents….
Hello Thanks for Demonstration, It is really helpful and most important, the way you describe each module is awesome.
Plz resolve this issue I have a form and just want to display all the user’s comments one after the other in the same page once they have submitted them
test comment
Awesome. Helped me deal with those annoying refreshes on my portfolio site.
Thanks for the guide.
However i cant seem to get one thing to work. When the alert-page displays from the jQuery code and I shut it down by clicking the “ok” button in the frame. It sends me to the refresh form.php file in my browser.
Any idea how to fix that?
Thank you so much for this step by step tutorial. Its the first i have read that is broken down. Has made me understand AJAX role
Very nice overview of this very important topic. PHP Html form submit without refresh or with refresh using javascript. Very usefull!!
i want to select box as it is selected after submit rerocd, how can i do this