Home >>Ajax Tutorial >Ajax Registration Form

Ajax Registration Form

Registration Form Using Ajax

In this tutorial you will learn how to do form submission using ajax, PHP and JavaScript. Here we use Ajax in JavaScript to send a form submission and that form does not require a reload or redirect page and this feature should improve user experience.

Here is the code begins with HTML in the form of an input field and submit buttons and when the code will send a request to a server then it will check validation first. and then web browser will receive a response from the server that containing the response either true or false (whether it is successful or not).

form.php

<html>
<head>
<script>

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}

}

var name=document.getElementById("n").value;
var eid=document.getElementById("eid").value;
var mob=document.getElementById("mob").value;

xmlhttp.open("GET","demo_get.php?n="+name+"&eid="+eid+"&mob="+mob,true);
//xmlhttp.open("GET","demo_get.php?fname=Henry&lname=Ford",true);

xmlhttp.send();
}
</script>
</head>

<body>
<h2>AJAX EXAMPLE</h2>
Enter your name<input type="text" id="n"/><hr/>
Enter your email<input type="text" id="eid"/><hr/>
Enter your mobile<input type="text" id="mob"/><hr/>
<input type="button" value="Show Name"  onClick="loadXMLDoc()"/><hr/>
<div id="myDiv" style="color:#993300;text-align:center;width:200px;border:1px solid #F8F8F8"></div>

</body>
</html>

PHP Script to display data retrieved through Ajax

demo_get.php

<?php
echo "welcome ".$_GET['n']."
";
echo "Your email is ".$_GET['eid']."
";
echo "your mobile is ".$_GET['mob']."
";
//echo "welcome ".$_GET['m']."
";
?>


Popular Tutorials