Question

我试图收集复选框数据而不添加要提交的按钮。

这是我到目前为止的代码：

＆＃13;

          <!-- 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 -->

＆＃13;

是否可以使用POST或GET方法？自动发送复选框，例如：http://index.htm?setting1=0

我对CSS HTML JS不太满意，这段代码在微控制器上运行。

Answer 1

听起来您想在复选框中添加onclick事件，以便Javascript函数可以通过XMLHttpRequest在后台联系服务器，如下所示：

<!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>

请注意，如果您要发送/接收其他域名，则可能需要考虑CORS。

Answer 2

这是解决此问题的绝佳信息：

enter image description here

http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-read-switch-automatically-using-AJAX/

HTML Checkbox自动发送POST

2 个答案: