HTML Checkbox自动发送POST [英] 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 -->
是否可以使用方法进行POST或GET?自动发送该复选框，例如: http://index.htm?setting1 = 0
Is it possible to use method to POST or GET? Automatically send the the checkbox, ex: http://index.htm?setting1=0
我对CSS HTML JS不太满意，该代码在微控制器上运行.
I'm not really good with CSS HTML JS, this code is running on microcontroller.
推荐答案
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>
请记住，如果您要发送/发送邮件，则可能需要考虑 CORS .接收到另一个域.
Bear in mind that you may need to consider CORS if you're sending/receiving to a different domain.
这篇关于HTML Checkbox自动发送POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
