Transmit information securely to a web address using a button

Question

Transmit information securely to a web address using a button

I have a scenario where I have 3 buttons, and upon clicking any of them, I want to send the values within the <li></li> tags to a page called send.php. For instance, if I click on the first button, I wish to secretly send the value 1 to the send.php page. How can I monitor these buttons and retrieve the values accordingly?

<div class="cards">
    <div class="card shadow">
      <ul>
        <li id="one" class="price bottom-bar">1</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>   
    <div class="card active">
      <ul>
        <li id="two" class="price bottom-bar">2</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>
    <div class="card shadow">
      <ul>
        <li id="three" class="price bottom-bar">3</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>
  </div>

javascript

Answer 1

Answer №1

I understand that you are referring to sending data privately to a specific URL.

Send data privately to a URL

In this context, it implies sending text using the POST HTTP method where the data is securely encrypted within the body of the request (if using HTTPS) rather than being visible in the URL itself (as with the GET HTTP method).

const buttonList = [...document.getElementsByClassName("btn")];

function handleButtonClick(event, button) {
  const valueToSend = button.parentElement.parentElement.querySelector("li").textContent;
  
  fetch("send.php", {
    method: "POST",
    body: valueToSend
  })
  .then(
    response=>console.log(`Message ${valueToSend} successfully sent! ${response.url} responded with ${response.ok ? "success" : "error"} code ${response.status}.`),
    response=>console.log("There was an error sending the message.", response)
  );
  
  event.preventDefault(); // Prevent the default link redirection
}

for (const button of buttonList) {
  button.addEventListener("click", e=>handleButtonClick(e, button));
}

<div class="cards">
    <div class="card shadow">
      <ul>
        <li id="one" class="price bottom-bar">1</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>   
    <div class="card active">
      <ul>
        <li id="two" class="price bottom-bar">2</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>
    <div class="card shadow">
      <ul>
        <li id="three" class="price bottom-bar">3</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>
  </div>

It should be noted that this demo will present an error since there is no PHP script configured at stackoverflow.com/send.php to handle the messages. Feel free to run this code on your own website :)

Answer 2

I understand that you are referring to sending data privately to a specific URL.

Send data privately to a URL

In this context, it implies sending text using the POST HTTP method where the data is securely encrypted within the body of the request (if using HTTPS) rather than being visible in the URL itself (as with the GET HTTP method).

const buttonList = [...document.getElementsByClassName("btn")];

function handleButtonClick(event, button) {
  const valueToSend = button.parentElement.parentElement.querySelector("li").textContent;
  
  fetch("send.php", {
    method: "POST",
    body: valueToSend
  })
  .then(
    response=>console.log(`Message ${valueToSend} successfully sent! ${response.url} responded with ${response.ok ? "success" : "error"} code ${response.status}.`),
    response=>console.log("There was an error sending the message.", response)
  );
  
  event.preventDefault(); // Prevent the default link redirection
}

for (const button of buttonList) {
  button.addEventListener("click", e=>handleButtonClick(e, button));
}

<div class="cards">
    <div class="card shadow">
      <ul>
        <li id="one" class="price bottom-bar">1</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>   
    <div class="card active">
      <ul>
        <li id="two" class="price bottom-bar">2</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>
    <div class="card shadow">
      <ul>
        <li id="three" class="price bottom-bar">3</li>
        <li><a class="btn" href="" >Send</a></li>
      </ul>
    </div>
  </div>

It should be noted that this demo will present an error since there is no PHP script configured at stackoverflow.com/send.php to handle the messages. Feel free to run this code on your own website :)

Transmit information securely to a web address using a button

Answer №1

Similar questions

Struggling to properly send props to the child component in Vue 3

Organize by the quantity of elements in an array using mongoose and MongoDB

What is the best way to access the value of an HTML tag in React?

Stop the event propagation when the back button is clicked

Showing the information obtained from an API request once the user submits the form without the need to reload the page

Tips for maintaining the integrity of an Array when passing it as an argument to a function in Javascript

Optimal method for organizing individuals into teams using Google Apps Script

The changing perspective in relation to the current position of a background

What is the best way to combine a javascript onclick function with php?

What is the best way to separate a string value with commas and send it to a controller?

Is your Z-Index failing to make an impact?

JavaScript tip: How to disregard symbols that affect the length of text in a textbox?

Extract the text enclosed by two specific symbols within a string and add it to a new array

Retrieving POST data from requests in Node.js

How can data be transferred between web pages using jQuery or JavaScript?

Updating webpage with the click of a button

Error Encountered in Reactjs: TypeError When Looping Through State Array to Render JSX Component

The PHP equivalent of converting data to a JSON string, similar to the

What is the best way to retrieve a value from an `<input type="number">` element and incorporate it into the script section?

Refreshing the Dropdown Menu with Jquery