Hai. It’s salman here. Today I show you how to create a login Form Using Ajax, php and Javascript.
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX PHP and javascript</title>
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
<link href=”css/style.css” rel=”stylesheet”>
</head>
<body>
Submit Form Using AJAX,PHP and javascript
Fill Your Information!
Name :
Email :
Password :
Contact No :
</form>
</div>
</div>–>
</form>
</div>
</div>
</body>
</html>
PHP File: ajaxjs.php
<?php
// Fetching Values From URL
$name2 = $_POST[‘name1′];
$email2 = $_POST[’email1′];
$password2 = $_POST[‘password1’];
$contact2 = $_POST[‘contact1’];
$connection = mysql_connect(“localhost”, “root”, “”); // Establishing Connection with Server..
$db = mysql_select_db(“mydba”, $connection); // Selecting Database
if (isset($_POST[‘name1’])) {
$query = mysql_query(“insert into form_element(name, email, password, contact) values (‘$name2’, ‘$email2’, ‘$password2′,’$contact2’)”); //Insert Query
echo “Form Submitted succesfully”;
}
mysql_close($connection); // Connection Closed
?>
JAVASCRIPT File: script.js
javascript file consist of ajax functionality.
function myFunction() {
var name = document.getElementById(“name”).value;
var email = document.getElementById(“email”).value;
var password = document.getElementById(“password”).value;
var contact = document.getElementById(“contact”).value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = ‘name1=’ + name + ‘&email1=’ + email + ‘&password1=’ + password + ‘&contact1=’ + contact;
if (name == ” || email == ” || password == ” || contact == ”) {
alert(“Please Fill All Fields”);
} else {
// AJAX code to submit form.
$.ajax({
type: “POST”,
url: “ajaxjs.php”,
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
ajaxRequest.open(“GET”, “login.php”, true)
});
}
return false;
}
Technology Blog 