This time, let's make a simple example application web application. we create a form submit that send data to a database with the help of jQuery without refreshing the page.
before that we must first create the database and its tables. example of a table that I make is table test_ajax
CREATE TABLE `test_ajax` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) DEFAULT NULL,
`email` varchar(50) DEFAULT NULL,
`password` varchar(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1
then, make config.php for connect with database
<?php
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'test';
$dbconfig = mysql_connect($host,$username,$password,$database);
?>
next we create pages index.php
<!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>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;
}
</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>
<?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";
}
?>
good luck ;)
No comments:
Post a Comment