Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to send dynamic key value pair to PHP with jQuery ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The purpose of this article is to send dynamic key-value pairs to the PHP back-end using jQuery AJAX in an HTML document.

Create two input fields i.e one for a key and the second one for value, and a button (to send key-value pair) in an HTML document. Assign a unique id to both the fields and to the button. In the JavaScript file, add an event listener to the button i.e click. On clicking of the button, a request is made to PHP file using jQuery Ajax. 

HTML Code: The following code is for structure.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <!-- CSS file -->
    <link rel="stylesheet" href="style.css">
    <!-- jQuery Ajax CDN -->
    <script src=
    <!-- JavaScript file -->
    <script src="script.js"></script>
    <div class="container">
        <h1>Dynamic Key Value Pair</h1>
        <!-- Input Field for key -->
        <input type="text" name="key" id="key" 
               placeholder="Enter Key">
        <!-- Input Field for value -->
        <input type="text" name="value" id="value"
               placeholder="Enter Value">
        <!-- Button to send key value pair -->
        <button type="button" id="btn">
            Send Data

CSS Code: The following code is the content for the file “style.css” used in the above HTML code.


.container {
  border: 1px solid rgb(73, 72, 72);
  border-radius: 10px;
  margin: auto;
  padding: 10px;
  text-align: center;
h1 {
  margin-top: 10px;
input[type="text"] {
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: larger;
button {
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  background-color: #167deb;
  border-color: #0062cc;
  font-weight: bolder;
  cursor: pointer;
button:hover {
  text-decoration: none;
  background-color: #0069d9;
  border-color: #0062cc;

JavaScript Code: The following code is the content for the file “script.js” file used in the above HTML code.


$(document).ready(() => {
  // Adding 'click' event listener to button
  $("#btn").click(() => {
    // Fetching key's input field data
    const key = $("#key").val();
    // Fetching values input field data
    const value = $("#value").val();
    // Initializing array of objects to 
    // store key-value pairs
    let data = {};
    // assigning key-value pair to data object
    data[key] = value;
    // jQuery Ajax Post Request
      (response) => {
        // response from PHP back-end
        alert(`Response from sever side is: ${response}`);

PHP code: The following is the code for the file “action.php” used in the above HTML code.


// Checking, if post value is 
// set by user or not 
if (isset($_POST['data'])) {
  // getting key-value pair object 
  // in $data variable
  $data = $_POST['data'];
  // Sending Response 
  echo "Success";


dynamic key value pair

My Personal Notes arrow_drop_up
Last Updated : 14 Jul, 2021
Like Article
Save Article
Similar Reads
Related Tutorials