How to send additional parameter with form data with ajax

Send form data to ajax page with additional parameter

How to send additional parameter with form data with ajax

Now i am going to introduce one more thing for Ajax. The point is "How to submit additional parameter to the Ajax page with form data". Yes, you can do that in jquery Ajax with append method.
Sometimes programmers require send adding key and value to an Ajax page which are not in form, that time this method is helpful. So what should I do.

Now, let's start-

When you create your Ajax page you need to implement new FormData (this) for send form to another page, now that time you require append you add on data with this.

var formData = new FormData(this);
formData.append(KET, PARAMETER);

 

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>

 

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:


Index.php

<!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>

 

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!";
}
?> 
Top