Open In App

How to send button value to PHP backend via POST using ajax ?

Last Updated : 12 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

Approach: Create a button in HTML document and assign an Id to it. In JavaScript file add an event listener to button i.e click. Then the request is made to PHP file using jQuery Ajax.

HTML code:

HTML




<!-- HTML Code -->
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <!-- JavaScript file -->
    <script src="script.js"></script>
  
    <!-- jQuery Ajax CDN -->
    <script src=
    </script>
</head>
  
<body>
  
    <!-- Button -->
    <button id="btn" value="hello world">
        Click On me!
    </button>
</body>
  
</html>


JavaScript code: The following is the code for “script.js” file.

Javascript




// Button DOM
let btn = document.getElementById("btn");
  
// Adding event listener to button
btn.addEventListener("click", () => {
  
    // Fetching Button value
    let btnValue = btn.value;
  
    // jQuery Ajax Post Request
    $.post('action.php', {
        btnValue: btnValue
    }, (response) => {
        // response from PHP back-end
        console.log(response);
    });
});


PHP code: The following is the code for “action.php” file.

PHP




<?php
  
    // Checking, if post value is
    // set by user or not
    if(isset($_POST['btnValue']))
    {
        // Getting the value of button
        // in $btnValue variable
        $btnValue = $_POST['btnValue'];
        
         // Sending Response
        echo "Success";
    }
?>


Output:



Similar Reads

Difference between Server-Side AJAX framework and Client-side AJAX framework ?
The article focuses on discussing the differences between the Server-side AJAX framework and the Client-side AJAX framework. The following topics will be discussed here: What is a Server-side AJAX framework?What is a Client-side AJAX framework?Server-side AJAX framework vs Client-side AJAX framework Let's start discussing each of these topics in de
3 min read
How to Send an Image using Ajax ?
Ajax stands for Asynchronous Javascript and XML and is used to make indirect requests to other origins. It can help you to perform a change to the web page dynamically. We can make an AJAX request with a special object called XMLHttpRequest which provides us with different methods to create an HTTP requests. Syntax: xhr = new XMLHttpRequest(); xhr.
3 min read
How to send data from client side to Node.js server using Ajax without page reloading ?
In this article, we are learning about how can we send data to a node server using Ajax without reloading the page from the client-side. Approach: We are creating a button in HTML document on the client-side when the button is pressed a request is made on our node server and the object is received at our server without reloading the page. This can
2 min read
How to get information sent via post method in PHP ?
In this article, we will learn to get information via the post method in PHP. In PHP, we can use the $_POST method as a superglobal variable that is operated to manage form data. After we click on submit button and the page will send the data through the post method. We can use the data after storing it in a variable according to our requirements.
2 min read
How to Send FormData Objects with Ajax-requests in jQuery ?
In this article, we will see how can we send formData objects with Ajax requests by using jQuery. To send formData, we use two methods, namely, the FormData() method and the second method is serialize() method. The implementation of Ajax to send form data enables the submission of data to the server without the need for a page refresh, which is a p
4 min read
POST request using AJAX by making Custom HTTP library
The task is to show how the XMLHttpRequest can be used to POST data to an API by making custom HTTP library. We will be taking a fake API which will contain Array of objects as an example and from that API we will show to POST data by XMLHttpRequest method by making a custom HTTP library. Used API: https://jsonplaceholder.typicode.com/posts What is
4 min read
How to Replicate Postman POST API Request using AJAX ?
In this project we'll mimic the action of submitting data using POST to a server from a web page. We replicate this process using AJAX (Asynchronous JavaScript and XML) directly in a web page, we're embedding similar functionality within our own interface. This involves setting up HTML elements like input fields and buttons to gather user input, us
4 min read
How to send a POST Request with PHP ?
In web development, sending POST requests is a common practice for interacting with servers and exchanging data. PHP, a versatile server-side scripting language, provides various approaches to accomplish this task. This article will explore different methods to send POST requests using PHP. Table of Content Using file_get_contents() and stream_cont
3 min read
How to use an HTTP GET or POST for Ajax Calls ?
Sending an HTTP request to the server using AJAX is the most common way of fetching data these days. It provides us with methods to send and receive data. In this article, we are going to discuss GET and POST methods. GET method: This method is used to GET or RECEIVE the data from a file, API, etc. How to use GET method?To use the GET method, first
3 min read
What are the types of post back in AJAX ?
Post Back in Ajax is the process of requesting information from the server by making an Ajax Request. We can provide a JavaScript event handler on the appropriate client event of the control that should initiate postback requests. For instance, a postback request happens when we click on a button/link for submitting a form. There are two types of p
4 min read