HTML Checkbox automatically send POST

问题

I'm trying to collect checkbox data without adding button to submit.

This is the code I have so far:

          <!-- Web form -->
            <form class="switcher-form" method="post">
				<p class="setting-switch setting-switch-first">
					<label for="setting1">Controle Total</label>
					<!-- switcher checkbox #1 -->
					<input type="checkbox" class="switcher" checked name="setting1" value="1" onclick="submit();"/>
				</p>
				
				<p class="setting-switch">
					<label for="setting2">Controle Sala</label>
					<!-- switcher checkbox #2 -->
					<input type="checkbox" class="switcher" checked name="setting2" value="2" onclick="submit();"/>
				</p>

				<p class="setting-switch">
					<label for="setting3">Controle Quarto A</label>
					<!-- switcher checkbox #3 -->
					<input type="checkbox" class="switcher" checked name="setting3" value="3" onclick="submit();"/>
				</p>
				
				<p class="setting-switch">
					<label for="setting4">Controle Quarto B</label>
					<!-- switcher checkbox #4 -->
					<input type="checkbox" class="switcher" checked name="setting4" value="4" onclick="submit();"/>
				</p>
				
				<p class="setting-switch">
					<label for="setting5">Controle Cozinha</label>
					<!-- switcher checkbox #5 -->
					<input type="checkbox" class="switcher" checked name="setting5" value="5" onclick="submit();"/>
				</p>

				<p class="setting-switch">
					<label for="setting6">Controle Garagem</label>
					<!-- switcher checkbox #6 -->
					<input type="checkbox" class="switcher" checked name="setting6" value="6" onclick="submit();"/>
				</p>

				<p class="setting-switch">
					<label for="setting7">Controle Portao</label>
					<!-- switcher checkbox #7 -->
					<input type="checkbox" class="switcher" checked name="setting7" value="7" onclick="submit();"/>
				</p>

				<p class="setting-switch">
					<label for="setting8">Controle Refrigeracao</label>
					<!-- switcher checkbox #8 -->
					<input type="checkbox" class="switcher" checked name="setting8" value="8" onclick="submit();"/>
				</p>
            </form>
            <!-- End: Web form -->

Is it possible to use method to POST or GET? Automatically send the the checkbox, ex: http://index.htm?setting1=0

I'm not really good with CSS HTML JS, this code is running on microcontroller.

回答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>

Bear in mind that you may need to consider CORS if you're sending/receiving to a different domain.