submit form without page refresh using jQuery ajax

Previously on click4knowledge, I showed how you can login and registration that works with page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial i explain how to submit form without page refresh using jQuery ajax. AJAX (Asynchronous JavaScript and XML) is the art of exchanging data with a server, and updating parts of a web page – without reloading the whole page.
In this tutorial I will show you how easy it is to do just that – submit a registration form without page refresh using jQuery, ajax! (The actual data submitting work is done by a php script or php page that processes in the background). Let’s get started.

Building a simple registration form submit without page refresh using jquery ajax

In this example, we have a simple registration form with name, email, and phone number. The form submits all the fields to a php script without page refresh using jquery, ajax, php and mysql. No encryption method here introduced because for easy understand the logic behind this for beginners. In upcoming week i will describe this with validation and password encryption.

Creating the Database

CREATE TABLE user
(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(255) UNIQUE,
password VARCHAR(255)
);

create dbconfig.php for connecting with the database

<?php
$host = 'localhost';
$username = 'username';
$password = 'password';
$database = 'database';
$dbconfig = mysqli_connect($host,$username,$password,$database);
?>

Here we create our form

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Submit form without page refresh using jQuery ajax - click4knowledge.com</title>
<style>
body {
	background-size: cover;
	font-family: Montserrat;
}
.logo {
	width: 213px;
	height: 36px;
	margin: 30px auto;
}
.login-block {
	width: 320px;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	border-top: 5px solid #ff656c;
	margin: 0 auto;
}
.login-block h1 {
	text-align: center;
	color: #000;
	font-size: 18px;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 20px;
}
.login-block input {
	width: 100%;
	height: 42px;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px solid #ccc;
	margin-bottom: 20px;
	font-size: 14px;
	font-family: Montserrat;
	padding: 0 20px 0 50px;
	outline: none;
}
.login-block input#username {
	background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
	background-size: 16px 80px;
}
.login-block input#username:focus {
	background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
	background-size: 16px 80px;
}
.login-block input#password {
	background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
	background-size: 16px 80px;
}
.login-block input#password:focus {
	background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
	background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
	border: 1px solid #ff656c;
}
.login-block button {
	height: 40px;
	background: #ff656c;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px solid #e15960;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	font-family: Montserrat;
	outline: none;
	cursor: pointer;
}
.login-block button:hover {
	background: #ff7b81;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="submit.js"></script>
</head>
<body>
<div class="logo"></div>
<div class="login-block">
  <h1>Submit Without Page Refresh</h1>
  <form method="post" action="" name="loginform">
    <input type="text" placeholder="Username" id="username" name="username" />
    <input type="password" placeholder="Password" id="password" name="password" />
    <button type="button" onClick="submitdata();">Submit</button>
    <button id="reset" type="reset">Reset</button>
  </form>
</div>
</body>
</html>

Now create the the script file which are collect the data and send to the php file.

// JavaScript Document
function submitdata() {
	var username  = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	// Returns successful data submission message when the entered information is stored in database.
	var dataString = 'username=' + username + '&password=' + password;
		if (username == '' || password == '') {
		alert("Please Fill All Fields");
		} 
		else {
					// AJAX code to submit form.
					$.ajax({
					type: "POST",
					url: "submit.php",
					data: dataString,
					cache: false,
					success: function(html) {
					alert(html);
					}
					});
				}
		return false;
}

php file for submit data into database

<?php
include('dbconfig.php');
// Fetching Values From the post method
$username = $_POST['username'];
$password = $_POST['password'];
if (isset($_POST['username'])) {
$query = mysqli_query($dbconfig,"insert into user(username, password) values ('$username', '$password')"); //Insert Query
echo "Form Submitted succesfully";
}
?>

After run the script just check your database new data submitted without page refresh. Thanks for watching.

28 responses to “submit form without page refresh using jQuery ajax”

  1. Guest says:

    The post have resolved my problem,thanks very much and hope you writting more good articles.

  2. Johng287 says:

    Hi, Nice post. But There is an issue together with your site in internet explorer.

  3. Smithc614 says:

    I was just seeking this info for some time. After six hours of continuous Googleing, at last I got it in your web site. I wonder what is the lack of Google strategy that don’t rank this kind of informative websites in top of the list. Generally the top sites are full of garbage.

  4. furtdso linopv says:

    An impressive share, I just given this onto a colleague who was doing a bit analysis on this. And he the truth is purchased me breakfast as a result of I discovered it for him.smile. So let me reword that: Thanks for the treat! But yeah Thanks for spending the time to discuss this, I feel strongly about it and love studying extra on this topic. If potential, as you change into expertise, would you thoughts updating your weblog with more particulars? It’s highly useful for me. Massive thumb up for this weblog put up!

    • hey @furtdso thanks for your feedback. We will update our blog post with much more post in couple of days. So you can also subscribe our post and when we will post anything you will also get a notification from us.Also you can follow us on facebook, google+.

  5. Tennent says:

    I simply want to tell you that I’m newbie to blogging and really savored this blog site. Very likely I’m going to bookmark your blog . You absolutely come with wonderful posts. Kudos for sharing with us your web site.

  6. Guest says:

    I think the article is very helpful for us,it has solved our problem,thanks!

  7. Cnejabo says:

    Thanks , I have recently been searching for info approximately this topic for a while and yours is the best I have found out till now.

  8. Anonymous says:

    Dear friend
    This post is very helpful for me,i like it very much,thank you!

  9. Lorenza says:

    Your website can go viral.

  10. adanmaccarthy says:

    This information is valuable. How can I find out more?

  11. rod carney says:

    Hello! I just wanted to ask if you ever have any problems with hackers?My last blog (WordPress) was hacked and I ended up losing a few months of hard work due to no back up. Do you have any methods to protect against hackers?

  12. Quest bars says:

    My family all the time say that I am wasting my time here at net,
    except I know I am getting familiarity everyday by reading such pleasant content.

  13. DaleMHoliman says:

    I read this bit of writing completely concerning the
    comparison of newest and earlier technologies,
    it’s remarkable article.

  14. Prabhakaran says:

    Awesome admin. I am now thorough with how to use Ajax simply by this post. Thank u so much. I tried many sites and forums but this one really good.

  15. Coco says:

    This is a really good tip particularly to those new to the programming. Brief but very accurate info Appreciate your sharing this one. A must read post!

  16. DawneLMcnair says:

    Its very well written; I love what you’ve reached say. But may be you could a little bit more in the way of content so people could get in touch with it better. You’ve got so much of text for only having one
    or 2 images. Perhaps you could space it better?

  17. guest says:

    Beautiful tutorial very good good demo there.

  18. Azeez says:

    Great work.
    I just what to ask a question.
    Which AJAX code works for NOT making the page reload on click submit button?

    Thanks.

  19. Frank says:

    I need to pass some data which it not in the form (such as date, time). Do I need to set up a variable in submit.js? Thanks.

  20. JoshQuake says:

    I was using an absolute path when setting script source. Removed the / before the folder and it’s working now. Thanks!

Leave a Reply

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