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.
推荐答案
听起来您想添加 XMLHttpRequest
,如下所示:
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屋!