Отправить значение флажка в файл control.php с помощью метода href

Question

У меня есть файл control.php для моей веб-камеры, и я могу отправлять ему команды, используя ссылку href на карте изображения, например: href = "command.php? Cmd = 1". В control.php есть таймер сна, который останавливает движение камеры через 1 секунду. Все работает хорошо. Теперь я хотел бы добавить флажок на страницу потоковой передачи веб-камер и хотел бы отправить значение флажка также в command.php в дополнение к comnand. Он будет либо останавливать движение кулачка через одну секунду, либо нет, в зависимости от значения флажка. Я перепробовал все в php и даже JS, но я слишком глуп, чтобы сделать это. Любая помощь высоко ценится! Ура, Фальк

Answer 1

Большое спасибо, Кристопер! Может быть, я не был достаточно точен, что я не могу сделать. Это то, что сейчас работает хорошо:

<center><h3 class="auto-style21">Camera Control 
<input type="checkbox" id="myCheck" onclick="myFunction()" checked="checked"> AutoStop aktiviert: <i id="demo"></i></h3>

<script>
function myFunction() {
var x = document.getElementById("myCheck").checked;
document.getElementById("demo").innerHTML = x;
}
</script>

Но теперь, вместо отправки auto = true или false, я хотел бы отправить значение x, см. Ниже:

<map name="image-map">
<img src="ptz.jpg" usemap="#image-map">
<area alt="Up" title="Up" target="control" coords="127,31,25" shape="circ" 
href="control.php?cmd=0&auto=false">
<area alt="Down" title="Down" target="control" coords="127,170,30" shape="circ" 
href="control.php?cmd=2&auto=false">
<area alt="Left" title="Left" target="control" coords="39,93,30" shape="circ" 
href="control.php?cmd=4&auto=false">
<area alt="Right" title="Right" target="control" coords="217,93,25" shape="circ" 
href="control.php?cmd=6&auto=false">
<area alt="UpRight" title="UpRight" target="control" coords="181,49,22" 
shape="circ" href="control.php?cmd=91&auto=true">
<area alt="UpLeft" title="UpLeft" target="control" coords="71,49,22" 
shape="circ" href="control.php?cmd=90&auto=true">
<area alt="DownLeft" title="DownLeft" target="control" coords="63,144,22" 
shape="circ" href="control.php?cmd=92&auto=true">
<area alt="DownRight" title="DownRight" target="control" coords="188,144,22" 
shape="circ" href="control.php?cmd=93&auto=true">
<area alt="Stop" title="Stop" target="control" coords="126,95,46" shape="circ" 
href="control.php?cmd=1&auto=true">
</map>
</center>

Я попробовал document.write, но опять же, я слишком глуп для сумасшедшего синтаксиса. document.getElementById -> InnerHTML работает отлично, теперь это решение, на случай, если кому-то интересно:

<script>
function myFunction() {
var x = document.getElementById("myCheck").checked;
document.getElementById("demo").innerHTML = x;
var up = "<area alt=\"Up\" title=\"Up\" target=\"control\" 
coords=\"127,31,25\" shape=\"circ\" href=\"control.php?cmd=0&auto=";
var down = "<area alt=\"Down\" title=\"Down\" target=\"control\" 
coords=\"127,170,30\" shape=\"circ\" href=\"control.php?cmd=2&auto=";
var left = "<area alt=\"Left\" title=\"Left\" target=\"control\" 
coords=\"39,93,30\" shape=\"circ\" href=\"control.php?cmd=4&auto=";
var right= "<area alt=\"Right\" title=\"Right\" target=\"control\" 
coords=\"217,93,25\" shape=\"circ\" href=\"control.php?cmd=6&auto=";
var upright = "<area alt=\"UpRight\" title=\"UpRight\" target=\"control\" 
coords=\"181,49,22\" shape=\"circ\" href=\"control.php?cmd=91&auto=";
var upleft = "<area alt=\"UpLeft\" title=\"UpLeft\" target=\"control\" 
coords=\"71,49,22\" shape=\"circ\" href=\"control.php?cmd=90&auto=";
var downleft = "<area alt=\"DownLeft\" title=\"DownLeft\" target=\"control\" 
coords=\"63,144,22\" shape=\"circ\" href=\"control.php?cmd=92&auto=";
var downright= "<area alt=\"DownRight\" title=\"DownRight\" 
target=\"control\" coords=\"188,144,22\" shape=\"circ\" href=\"control.php? 
cmd=93&auto=";
var autostop = x + "\">";
document.getElementById("camup").innerHTML = up + autostop;
document.getElementById("camdown").innerHTML = down + autostop;
document.getElementById("camleft").innerHTML = left + autostop;
document.getElementById("camright").innerHTML = right + autostop;
document.getElementById("camupright").innerHTML = upright + autostop;
document.getElementById("camupleft").innerHTML = upleft + autostop;
document.getElementById("camdownleft").innerHTML = downleft + autostop;
document.getElementById("camdownright").innerHTML = downright + autostop;
}
</script>

<map name="image-map">
<img src="ptz.jpg" usemap="#image-map">
<p id="camup"></p>
<p id="camdown"></p>
<p id="camleft"></p>
<p id="camright"></p>
<p id="camupright"></p>
<p id="camupleft"></p>
<p id="camdownleft"></p>
<p id="camdownright"></p>
<!--
<area alt="Up" title="Up" target="control" coords="127,31,25" shape="circ" 
href="control.php?cmd=0&auto=false">
<area alt="Down" title="Down" target="control" coords="127,170,30" 
shape="circ" href="control.php?cmd=2&auto=false">
<area alt="Left" title="Left" target="control" coords="39,93,30" shape="circ" 
href="control.php?cmd=4&auto=false">
<area alt="Right" title="Right" target="control" coords="217,93,25" 
shape="circ" href="control.php?cmd=6&auto=false">
<area alt="UpRight" title="UpRight" target="control" coords="181,49,22" 
shape="circ" href="control.php?cmd=91&auto=true">
<area alt="UpLeft" title="UpLeft" target="control" coords="71,49,22" 
shape="circ" href="control.php?cmd=90&auto=true">
<area alt="DownLeft" title="DownLeft" target="control" coords="63,144,22" 
shape="circ" href="control.php?cmd=92&auto=true">
<area alt="DownRight" title="DownRight" target="control" coords="188,144,22" 
shape="circ" href="control.php?cmd=93&auto=true"> 
-->
<area alt="Stop" title="Stop" target="control" coords="126,95,46" 
shape="circ" href="control.php?cmd=1&auto=true">
</map>
</center>
<iframe name="control" style="display:none"></iframe>

Не забудьте вызвать myFunction при загрузке тела.

Еще раз большое спасибо и привет, Фальк

Answer 2

Вы можете использовать событие javascript onclick () на вашем флажке и вызов AJAX для вашего второго сценария PHP. С this вы передаете объект-флажок и его данные в качестве параметра.

<input type='checkbox' onclick='moveCamera(this);'>

<script>
    function moveCamera(checkbox) {
       var http = new XMLHttpRequest();
       var url = 'command.php';
       var params = 'cmd=1&checked=' + checkbox.checked;

       http.open('POST', url, true);
       http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
       http.onreadystatechange = function() {
           if(http.readyState == 4 && http.status == 200) {
           // Here you can put code that will be executed after the call is complete
           }
       }
       http.send(params)
    }
</script>

Теперь вы можете получить доступ к checked точно так же, как cmd во втором php-скрипте.