Skip to main content
submit form using jquery ajax in php

[Demo] Submit HTML Form Using jQuery Ajax in PHP

Hello friends, Today we will move one step ahead in PHP. Today i will show how to submit form using jQuery Ajax in PHP with demo source code. Basically this is possible by jQuery ajax and PHP. Here i will show you 2 different methods for form submission without refreshing page. So let’s start..

Method 1: Submit HTML form With jQuery Ajax

In this method, We use jQuery Ajax to send AJAX request and data will send in back-end. Therefore page will not refresh here. Lets see in the example. Create a “index.php” file. Copy the below code and paste it inside the “index.php” file.

Index.php

<!DOCTYPE html>
<html>
<head>
	<title>Demo Form-submission using AJAX and PHP</title>
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form action="" method="post" id="form_submission_ajax">
	<label>Firstname:</label>
	<input type="text" name="f_name" id="f_name"><br>
	<label>Lastname:</label>
	<input type="text" name="l_name" id="l_name"><br>
	<label>Email:</label>
	<input type="email" name="email" id="email"><br>
	<button type="button" class="submit_data">Submit Data</button>
</form>
</body>
<script type="text/javascript">
$('.submit_data').click(function(){
	var f_name = $('#f_name').val();
	var l_name = $('#l_name').val();
	var email = $('#email').val();
	var form_data = {
		f_name : f_name,
		l_name : l_name,
		email : email
	}
	$.ajax({
		url: "submit.php",
		data: form_data,
		type: "POST",
		success: function(response){
			alert(response);
		}
	})
});
</script>
</html>

Now, create a “submit.php” file in the same directory where “index.php” placed. Copy the below code and paste it inside it.

submit.php

<?php 
echo $firstname = $_POST['f_name']."<br>";
echo $lastname = $_POST['l_name']."<br>";
echo $email = $_POST['email']."<br>";
?>

Description:

In the above code, we use simple form with 3 elements i.e. “firstname”,”lastname”,”email”. Whenever user will fill this data and click on “Submit Data” button. This data will send to submit.php file and response will get from “submit.php”. This is simple method.

Method-2: Submit a Form jQuery serialize() and Ajax

In the above code, we saw in jQuery code that how we get firstname, lastname and email one by one. See what happened while there are many form elements available. Therefore, In this method i use serialize() function of jQuery. See how simple to get form elements by serialize() function. See the below example. You can perform this method in above files too. Let’s create a index.php file and put below code in it.

index.php

<!DOCTYPE html>
<html>
<head>
	<title>Demo Form-submission using AJAX and PHP</title>
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form action="" method="post" id="form_submission_ajax">
	<label>Firstname:</label>
	<input type="text" name="f_name" id="f_name"><br>
	<label>Lastname:</label>
	<input type="text" name="l_name" id="l_name"><br>
	<label>Email:</label>
	<input type="email" name="email" id="email"><br>
	<button type="button" class="submit_data">Submit Data</button>
</form>
</body>
<script type="text/javascript">
$('.submit_data').click(function(){
	var form_data = $('#form_submission_ajax').serialize();
	$.ajax({
		url: "submit.php",
		data: form_data,
		type: "POST",
		success: function(response){
			alert(response);
		}
	})
});
</script>
</html>

Now create a response i.e. submit.php file. Copy the below code and put code inside it.

submit.php

<?php 
echo $firstname = $_POST['f_name']."<br>";
echo $lastname = $_POST['l_name']."<br>";
echo $email = $_POST['email']."<br>";
?>

See the result after fill the form. 🙂

I hope that this tutorial may help you. Please share it with your friends. If you have any question regarding this tutorial then please ask me in comment-box. Thank you very much. 🙂

admin

HI, i am software developer having knowledge of PHP, C, C++ programming languages. I am very passionate about programming and ability to solve the programming problems. CodeandTuts is my blog where i like to put new tutorial and help new developer.

Leave a Reply

Your email address will not be published. Required fields are marked *