HTML Checkbox Automatically Send POST

August 30, 2022 Post a Comment

I'm trying to collect checkbox data without adding button to submit. This is the code I have so far: Is it possible to use method to POST or GET? Automatically send the the checkb

Solution 1:

It sounds like you want to add an onclick event to the checkbox, so that a Javascript function can contact the server in the background via an XMLHttpRequest, as illustrated below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <script>
"use strict"

function doAJAX()
{

  console.log("Contacting the server...");

  var xhr = new XMLHttpRequest();
  xhr.onload = function()
  {
    console.log("Got a response!");
  };
  xhr.open("get", "http://localhost:3000/something.png", true);
  xhr.responseType = "blob";
  xhr.send();

}
    </script>
    <input type="checkbox" onclick="doAJAX();">
  </body>
</html>