PHP - Ajax

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that communicates to and from a server and database without the need for a postback or a complete page refresh. Ajax itself is mostly a generic term for various JavaScript techniques used to connect to a web server dynamically without necessarily loading multiple pages.

Form Submit Without Page Refreshing Using php and ajax

Index.php


<html>
<head>
<title>Submit PHP Forms without Page Refresh Ajax | Codegyan</title>
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{			
$(document).on('submit', '#reg-form', function()
{
	var data = $(this).serialize();
	$.ajax({		
	type : 'POST',
	url  : 'submit.php',
	data : data,
	success : function(data)
		{						
		$("#reg-form").fadeOut(500).hide(function()
		{
		$(".result").fadeIn(500).show(function()
		{
		$(".result").html(data);
		});
		});						
		}
		});
		return false;
	});
});
</script>
</head>
<body>
<div id="container">
	<div id="form" class="result">
    	<form method="post" id="reg-form">
        <table border="0">
        <tr>
         <td><input type="text" name="fname" id="lname" placeholder="First Name" /></td>
        </tr>
        <tr>
        <td><input type="text" name="lname" id="lname" placeholder="Last Name" /></td>
        </tr>
        <tr>
        <td><input type="text" name="email" id="email" placeholder="Your Email" /></td>
        </tr>
        <tr>
        <td><input type="text" name="phno" id="phno" placeholder="Contact No" /></td>
        </tr>
        <tr>
        <td><hr /></td>
       </tr>
        <tr>
        <td align="center"><button type="submit">Submit</button></td>
        </tr>
        </table>
        </form>
    </div>
</div>
</body>
</html>
							
							

submit.php


<?php
if($_POST)
{
	$fname = $_POST['fname'];
	$lname = $_POST['lname'];
	$email = $_POST['email'];
	$phno = $_POST['phno'];
}	
?>		
    <table border="0">
    <tr>
     <td>Succedd !!!</td>
    </tr>
    <tr>
     <td><hr /></td>
    </tr>
    <tr>
     <td>First Name</td>
    <td><?php echo $fname ?></td>
    </tr>   
    <tr>
    <td>Last Name</td>
    <td><?php echo $lname ?></td>
   </tr>  
    <tr>
    <td>Your Email</td>
    <td><?php echo $email; ?></td>
    </tr> 
    <tr>
    <td>Contact No</td>
    <td><?php echo $phno; ?></td>
    </tr>  
     </table>
	

							

Live Demo

The following form is only demo purpose contact form it can't submit your data into database,enter fake data like name demo email demo@example.com and than click on submit button


Share Share on Facebook Share on Twitter Share on LinkedIn Pin on Pinterest Share on Stumbleupon Share on Tumblr Share on Reddit Share on Diggit

You may also like this!