Last Update - 14 Oct 2020

How to send additional parameter with form data with ajax

How to send additional parameter with form data with ajax

Send form data with ajax, Yes 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 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

Now, let's start with the submit the form using ajax JavaScript. I'll also discuss the jQuery ajax serialize form data for example.

How to start a Blog?

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(KET, 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

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

Did you find this page helpful? X