Hello Guys, In this tutorial i will show you how to submit HTML form data using jQuery Ajax to PHP. jQuery AJAX is useful for submit form data to server without redirect to another page. In normal html form submit, page will reload or redirect to another page with requested form data but in ajax it won’t reload or redirect.
Here i will show you 2 different methods for form submission without refreshing page.
Lets see how it is working with below examples.
Method 1: Submit HTML form With jQuery Ajax
In this method, We use jQuery Ajax to send AJAX request and data will send in server file. Therefore page will not refresh here. Lets see in the example. Create a index.php file which contain HTML form code.
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>
Here in index.php file i have added firstname, lastname and email fields. Make sure i haven’t added action url in form because i will submit form data using jQuery AJAX.
Here jQuery script will execute while clicking on submit button. I have create form_data object with form value. Ajax will submit form data to submit.php (server file) using POST method. If success response comes from submit.php file, it will pop-up alert with response data.
Now, create a submit.php file in the same directory where index.php placed.
submit.php
<?php
echo $firstname = $_POST['f_name']."<br>";
echo $lastname = $_POST['l_name']."<br>";
echo $email = $_POST['email']."<br>";
?>
Explanation:
In the above code, Whenever user will fill this data and click on Submit Data button. This data will send to submit.php file using jQuery AJAX method and response data will popup using alert box. This all process will done without refreshing or redirecting current form page.
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 and create javascript object. It will become tremendous process if there are many form fields. 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 submit.php file in the same directory where index.php placed.
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 and submit it. 🙂
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. 🙂
