Hello, In this tutorial, I am explaining you how to submit HTML form’s fields values/data using jQuery Ajax to PHP file. AJAX is useful for send form data to server site without refresh to page. if you want to send data to PHP file without reload you need to use Ajax request process.
Here, I am explaining you 2 example for sending data through Ajax to PHP file.
in Example 1. firstly, you need to include jquery file in this page. I created a new page called ajax_form.php here I created some html form’s fields and below I created Ajax form sending request. I created fields like first_name, last_name, emailid, address get all fields value separately and sending those values to other PHP file called “ajax_response.php” .
Example 1: Submit HTML form data With jQuery Ajax process
<!DOCTYPE html>
<html>
<head>
<title>webdeveloperindia.in form sending AJAX response data to PHP</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form action="" id="form_submit" method="post">
<p><label>First Name:</label>
<input type="text" name="first_name" id="first_name"></p>
<p><label>Last Name:</label>
<input type="text" name="last_name" id="last_name"></p>
<p><label>Email Id:</label>
<input type="email" name="emailid" id="emailid"></p>
<p><label>Address:</label>
<input type="text" name="address" id="address"></p>
<p><button type="button" class="submit">Submit</button></p>
</form>
</body>
<script type="text/javascript">
$('.submit').click(function(){
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var emailid = $('#emailid').val();
var address = $('#address').val();
var form_data_sending = {
first_name : first_name,
last_name : last_name,
emailid : emailid,
address : address
}
$.ajax({
url: "ajax_response.php",
data: form_data_sending,
type: "POST",
success: function(response){
alert(response);
}
})
});
</script>
</html>
Output :
<?php
echo "First Name :".$first_name = $_POST['first_name']."<br>";
echo "Last Name :".$last_name = $_POST['last_name']."<br>";
echo "EmailId :".$emailid = $_POST['emailid']."<br>";
echo "Address :".$address = $_POST['address']."<br>";
?>
Example 2: Submit HTML form data With jQuery serialize() Ajax process
in Example 2. I created a new page called ajax_form.php here I created html form and below I created Ajax form sending request with serialize() function. I created fields like first_name, last_name, emailid, address, I used serialize() function it will get all fields values at once and sending those values to other PHP file called “ajax_response.php” .
<!DOCTYPE html>
<html>
<head>
<title>webdeveloperindia.in form sending AJAX response data to PHP</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form action="" id="form_submit" method="post">
<p><label>First Name:</label>
<input type="text" name="first_name" id="first_name"></p>
<p><label>Last Name:</label>
<input type="text" name="last_name" id="last_name"></p>
<p><label>Email Id:</label>
<input type="email" name="emailid" id="emailid"></p>
<p><label>Address:</label>
<input type="text" name="address" id="address"></p>
<p><button type="button" class="submit">Submit</button></p>
</form>
</body>
<script type="text/javascript">
$('.submit').click(function(){
var form_data = $('#form_submit').serialize();
$.ajax({
url: "ajax_response.php",
data: form_data,
type: "POST",
success: function(response){
alert(response);
}
})
});
</script>
</html>
Output :
<?php
echo "First Name :".$first_name = $_POST['first_name']."<br>";
echo "Last Name :".$last_name = $_POST['last_name']."<br>";
echo "EmailId :".$emailid = $_POST['emailid']."<br>";
echo "Address :".$address = $_POST['address']."<br>";
?>
Hello, Welcome to webdeveloperindia.in. I am a full-stack web developer. Email – [email protected] | Skype – azaruddin23. I have knowledge of PHP, Laravel, Magento 1/2, Codeigniter, WordPress, Joomla, Shopify, Git, Bitbuket, jQuery, Ajax, Javascript and ReactJS.