Pass form data in ajax, Yes now I am going to introduce one more thing for Ajax formdata. The point is "How to submit additional parameter to the Ajax page with form-data". Yes, you can do that in jQuery Ajax with the append method.
Sometimes programmers require to send adding key and value to an Ajax page which is not in form, that time this method is helpful. So what should I do?
Sending form data or Pass form data in ajax
Now, let's start with the submit the form using ajax JavaScript. I'll also discuss the jQuery ajax serialize form data for example.
When you create your Ajax page you need to implement new FormData (this) to send the form to another page, now that time you require append you add on data with this.
var formData = new FormData(this);
formData.append(KEY, PARAMETER);Rendering the form in HTML
Ok, First you have to create your form as previous you have created.
<form id="sendFormData">
<div class="form-group">
<label for="Name">Name</label>
<input type="text" placeholder="Name" class="form-control" name="name" required="">
</div>
<div class="form-group">
<label for="Email">Email address</label>
<input type="email" placeholder="Email" class="form-control" name="email" required="">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="check" required="">
<label class="form-check-label" for="exampleCheck1">Check me</label>
</div>
<div class="statusMsg"></div>
<input type="submit" name="submit" class="btn btn-danger" value="Submit"/>
</form>Form Submit Logic in JavaScript - JQuery
Second, you have to create your java script code like this:
$(document).ready(function(e){
$("#sendFormData").on('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
formData.append('action', 'savadata');
$.ajax({
type: 'POST',
url: 'ajax_page.php',
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data){
alert(data);
},
complete: function(){
alert("Data uploaded successfully.");
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Some problem occurred, please try again.");
}
});
});
});Third, your Ajax page will receive these values as normally with:
$_POST[KEY]Now, finally your code should be:
Top 50 MySQL Interview Questions and Answers
Final Thoughts on pass form data in ajax
<!DOCTYPE html>
<html lang="en">
<head>
<title>Send form data to ajax page with additional parameter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-info">Send form data to ajax page with additional parameter</h2>
<div class="col-md-6">
<form id="sendFormData">
<div class="form-group">
<label for="Name">Name</label>
<input type="text" placeholder="Name" class="form-control" name="name" required="">
</div>
<div class="form-group">
<label for="Email">Email address</label>
<input type="email" placeholder="Email" class="form-control" name="email" required="">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="check" required="">
<label class="form-check-label" for="exampleCheck1">Check me</label>
</div>
<div class="statusMsg"></div>
<input type="submit" name="submit" class="btn btn-danger" value="Submit"/>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(e){
$("#sendFormData").on('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
formData.append('action', 'savadata');
$.ajax({
type: 'POST',
url: 'ajax_page.php',
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data){
alert(data);
},
complete: function(){
alert("Data uploaded successfully.");
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Some problem occurred, please try again.");
}
});
});
});
</script>PHP Script
ajax_page.php
<?php
if(isset($_POST['action'])){
$action = $_POST['action'];
if($action == 'savadata'){
$name = $_POST['name'];
$email = $_POST['email'];
$check = $_POST['check'];
echo "Name : ".$name;
echo "Email : ".$email;
echo "Check : ".$check;
}
else{
echo "Invalid Method!";
}
}
else{
echo "Invalid Calling Method!";
}
?> 
(1) Comments
Programmer
Really great solution as a beginner i am finding this kind of solution for my project.
Very helpfull.Thank You.
Write a comment