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']." "; ?>
No Sidebar ads