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 | Veewom</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

PHP - Ajax

Form Submit Without Page Refreshing Using php and ajax

Index.php

submit.php

Live Demo

You may also like this!