Submit PHP Form without Page Refresh

Submitted by alpha_luna on Saturday, August 13, 2016 - 15:58.

Submit PHP Form without Page Refresh

In this article, we are going to create on how to submit Submit PHP Form without Page Refresh using jQuery and Ajax. We are going to use these two functions so we can submit PHP Forms without any refreshing in our page and we are going to use the $_POST request in PHP. Let's do this:

Creating Simple HTML Form

Kindly copy and paste to your BODY tag of your page. Save it as "index.php".

<div id="container">
	<div id="form" class="result_1">
    	<form method="post" id="registration_Form">
			<table border="1">
				<tr>
					<td><label>First Name</label></td>
					<td><input type="text" name="first_name" id="first_name" placeholder="Enter your First Name" autofocus="autofocus"/></td>
				</tr>
				<tr>
					<td><label>Last Name</label></td>
					<td><input type="text" name="last_name" id="last_name" placeholder="Enter your Last Name" /></td>
				</tr>
				<tr>
					<td><label>User Name</label></td>
					<td><input type="text" name="user_name" id="user_name" placeholder="Enter your User Name" /></td>
				</tr>
				<tr>
					<td><label>Password</label></td>
					<td><input type="text" name="password" id="password" placeholder="Enter your Password" /></td>
				</tr>
				<tr>
					<td><label>Email</label></td>
					<td><input type="text" name="email" id="email" placeholder="Enter your Email" /></td>
				</tr>
				<tr>
					<td colspan="2"><button type="submit">Register</button></td>
				</tr>
			</table>
        </form>
    </div>
</div>

Script

Copy and paste to your HEAD tag of your page in index.php.

<script type="text/javascript" src="js_code.js"></script>
<script type="text/javascript">
$(document).ready(function()
{	
	$(document).on('submit', '#registration_Form', function()
	{		
		var data = $(this).serialize();
		$.ajax({
		type : 'POST',
		url  : 'submit.php',
		data : data,
		success :  function(data)
				   {						
						$("#registration_Form").fadeOut(500).hide(function()
						{
							$(".result_1").fadeIn(500).show(function()
							{
								$(".result_1").html(data);
							});
						});
 
				   }
		});
		return false;
	});
});
</script>

Result Page

Kindly copy and paste this source code and save it as "submit.php".

<?php
 
if($_POST)
{
	$first_name = $_POST['first_name'];
	$last_name = $_POST['last_name'];
	$user_name = $_POST['user_name'];
	$password = $_POST['password'];
	$email = $_POST['email'];
	?>
    <table border="0">
    <tr>
    <td colspan="2" style="color:blue; font-size:30px; font-family:cursive; font-weight:bold;">Successfully Registered !!!</td>
    </tr>
    <tr>
    <td colspan="2"><hr /></td>
    </tr>
    <tr>
    <td style="color:blue; font-size:18px; font-family:cursive; font-weight:bold;">First Name</td>
    <td style="color:red; font-size:18px; font-family:cursive; font-weight:bold;"><?php echo $first_name; ?></td>
    </tr>
    <tr>
    <td style="color:blue; font-size:18px; font-family:cursive; font-weight:bold;">Last Name</td>
    <td style="color:red; font-size:18px; font-family:cursive; font-weight:bold;"><?php echo $last_name; ?></td>
    </tr>
    <tr>
    <td style="color:blue; font-size:18px; font-family:cursive; font-weight:bold;">User Name</td>
    <td style="color:red; font-size:18px; font-family:cursive; font-weight:bold;"><?php echo $user_name; ?></td>
    </tr>
    <tr>
    <td style="color:blue; font-size:18px; font-family:cursive; font-weight:bold;">User Name</td>
    <td style="color:red; font-size:18px; font-family:cursive; font-weight:bold;"><?php echo $password; ?></td>
    </tr>
    <tr>
    <td style="color:blue; font-size:18px; font-family:cursive; font-weight:bold;">Email</td>
    <td style="color:red; font-size:18px; font-family:cursive; font-weight:bold;"><?php echo $email; ?></td>
    </tr>
    </table>
    <?php
}
?>

Result:

That's all, you can submit PHP Forms without page refreshing. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

580 views

Submit PHP Form without Page Refresh