Отправка формы при установке галочки в чекбоксе

Чтобы использовать JavaScript с помощью атрибута onChange в ваших тегах ввода, вы можете добавить следующий код к вашему элементу <input>:

<input onChange="this.form.submit()" ... />

Этот код автоматически отправляет форму, к которой принадлежит данный элемент ввода, каждый раз, когда изменяется его значение. Убедитесь, что ваш <input> находится внутри формы, чтобы вызов this.form.submit() сработал корректно.

Да, это возможно.

Вы можете использовать следующий код:

<form id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type="checkbox" name="cBox[]" value="3" onchange="document.getElementById('formName').submit()">3</input>
    <input type="checkbox" name="cBox[]" value="4" onchange="document.getElementById('formName').submit()">4</input>
    <input type="checkbox" name="cBox[]" value="5" onchange="document.getElementById('formName').submit()">5</input>
    <input type="submit" name="submit" value="Search" />
</form>

Добавив onchange="document.getElementById('formName').submit()" к каждому чекбоксу, вы инициируете отправку формы каждый раз, когда происходит изменение состояния чекбокса.

Если вас устраивает использование jQuery, это можно сделать ещё проще и менее навязчиво:

$(document).ready(function(){
    $("#formname").on("change", "input:checkbox", function(){
        $("#formname").submit();
    });
});

Для любого количества чекбоксов в вашей форме, когда происходит событие "change", форма будет отправлена. Это также будет работать, если вы динамически создаёте больше чекбоксов благодаря методу .on().

Я немного поборолся с этой ситуацией в течение четырех часов и решил поделиться с вами!

Вы можете отправить форму, просто кликнув по чекбоксу, но есть одна странность: когда вы проверяете результат отправки в PHP, вы ожидали бы, что форма будет установлена как при установке, так и при снятии галочки с чекбокса. Но это не так. Форма устанавливается только когда вы действительно ставите галочку; если вы убираете её, форма не будет установлена. Слово checked в конце тега input type='checkbox' заставляет чекбокс отображаться как отмеченный, так что если ваше поле отмечено, это должно отображаться, как в приведенном ниже примере. Когда галочка снята, PHP обновляет состояние поля, что заставляет слово checked исчезнуть.

Ваш HTML должен выглядеть так:

<form method='post' action='#'>
    <input type='checkbox' name='checkbox' onChange='submit();' 
    <?php if($page->checkbox_state == 1) { echo 'checked'; } ?>>
</form>

А PHP код может выглядеть следующим образом:

if (isset($_POST['checkbox'])) {
    // чекбокс только что был установлен
    // сохраняем новое состояние чекбокса где-то
    $page->checkbox_state = 1; // здесь нужно использовать =, а не ==
} else {
    // чекбокс только что был снят
    // если на странице есть другая форма, которая использует submit, 
    // убедитесь, что это не она вызывает обработку ввода
    // в противном случае отправка другой формы снимет отметку с вашего чекбокса
    // поэтому эта строка опциональна:
    if (!isset($_POST['submit'])) {
        $page->checkbox_state = 0; // здесь тоже нужно использовать =, а не ==
    }
}

Обратите внимание, что в PHP нужно использовать оператор присваивания =, а не оператор сравнения ==, когда вы хотите изменить значение переменной.

Ваш код позволяет отправлять форму при изменении состояния любого чекбокса на странице. Как только чекбокс отмечается, срабатывает событие change, и форма с идентификатором #formName отправляется. Однако, как вы правильно заметили, более эффективным подходом будет добавление классов к каждому чекбоксу и использование селектора класса для обработки события изменения.

Например, можно сделать так:

$(document).ready(function() {
    $(".checkbox_class").change(function() {
        if ($(this).is(":checked")) {
            $("#formName").submit();
        }
    });
});

Этот подход даст вам возможность управлять, какие именно чекбоксы будут отправлять форму, оставляя возможность контроля за их поведением. Добавление классов также упрощает модификацию кода в будущем.

Вы можете отправить форму, просто щелкнув на чекбоксе, используя простой метод на JavaScript. Для этого внутри тега <form> или атрибута <input> добавьте следующий атрибут:

onchange="this.form.submit()"

Пример:

<form>
      <div>
           <input type="checkbox" onchange="this.form.submit()">
      </div>
</form>

В этом примере при изменении состояния чекбокса форма будет автоматически отправлена.