Помощь с кнопками radio
 

Привет всем, нужна ваша помощь, имеется форма, которая передается методом POST. В ней имеется два checkbox, при нажатии на которые становятся активными определенные radio.

Если нажать на первый чекбокс, то активируются следующие элементы:

<input type="checkbox" id="1" value="1" name="group" data-cls="one"/>
<label for="1"><b>Запись публикуется на странице</b></label>

<input type="radio" id="4" value="4" name="user" class="item one" disabled="disabled"/>
<label for="4">Запись доступна только друзьям</label>
<input type="radio" id="5" value="5" name="user" class="item one" disabled="disabled"/>
<label for="5">Запись доступна всем пользователям</label>

Если нажать на второй чекбокс, то активируются следующие элементы:

<input type="checkbox" id="0" value="0" name="group" data-cls="two"/>
<label for="0"><b>Запись публикуется в сообществе</b></label>

<input type="radio" id="2" value="2" name="groups" class="item two" disabled="disabled"/>
<label for="2">Запись публикуется от имени сообщества</label>
<input type="radio" id="3" value="3" name="groups" class="item two" disabled="disabled"/>
<label for="3">Запись публикуется от имени пользователя</label>

Работает все через данный код javascript:

window.addEventListener('DOMContentLoaded', function() {
    [].forEach.call(document.querySelectorAll('[data-cls]'), function(btn) {
            var cls = btn.dataset.cls;
            btn.addEventListener('change', function() {
            [].forEach.call( document.querySelectorAll('.item'), function(el) {
                   el.value = '' ;
                   el.disabled = !el.classList.contains(cls)
               });
            });
        });
    });

Проблема в следующем, если оставить все как есть, то значение radio и checkbox не предаются, проверял через принт пост:

str_replace('  ', '  ', nl2br(print_r($_POST, true)));

Если со всех чекбоксов и радио убрать данные строки, то значения id передаются серверу, в чем проблема?

class="item one" disabled="disabled"
class="item two" disabled="disabled"

А вот что самое интересное, то с инпутами такой проблемы нет, все значения передаются:

<input type="text" id="services" class="item one" placeholder="Экспорт записи: twitter,facebook" name="services" disabled="disabled"/>

el.value = '' ; - это зачем?

Незнаю, воспользовался готовым решением, но, если ее убрать, то все равно, значения не передаются.

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

и как это можно изменить, если удалить данную строку, то при выборе чекбокса, ничего активным не становится.

А все, не надо, разобрался, спасибо.

Тут скорее важно понять логику того, чего вы на сервере хотите, а техническая сторона на клиенте, это вторично.

Для чего у вас флажки? Если для клиента дабы свойство флажков изменять, тогда да, нужно выпендриваться. Но если сервер проверяет значение флажка пришедшего, то он может определить какую из групп кнопок учитывать, а какую игнорировать?

Форма связанна с апи вконтакте, флажки нужны для включения или отключения определенных функций, для группы одни функции, а вот для личной страницы пользователя другие. Вот я и остановился на такой функции, если выбрал первый чекбокс, то функции для страницы пользователя становятся активными, если второй, то для сообщества. Если оставить все как есть, и не менять свойство флажков, например выделить функции и для группы и для пользователя, то в ответ придет не response , ка надо, а ошибка error.

Это прелюдии и серверному ЯП совсем не нужны, ему ставятся конкретные задачи: взять это, положить сюда, если это не "это", то забыть об этом. А кому из людишек и для чего это надо... его это не волнует.

Не отмеченный флажок на сервер передан не будет. Каждый из них имеет разные значения.

1) - сервер вообще не получил $_POST['group'] - он может понять что это означает?
2) - сервер получил $_POST['group'] со значением 0 или 1 - он может понять какую соответствующую группу хотел клиент?

То есть клиент пусть хоть защелкается кнопками обеих групп, если серверу поставлена задача, что флажок первичный, то клиентские проблемы его не колышат.

Если пользователь выберет для группы, то перед значением 123456 поставится знак минус, если он это значение не выберет, отправится только 123456.

А так спасибо, все работает, и спасибо за остальные твои ответы, я раньше об этом и не знал. Теперь с этим кодом, все работает нормально, как нужно.

window.addEventListener('DOMContentLoaded', function() {
    [].forEach.call(document.querySelectorAll('[data-cls]'), function(btn) {
            var cls = btn.dataset.cls;
            btn.addEventListener('change', function() {
            [].forEach.call( document.querySelectorAll('.item'), function(el) {
                   el.disabled = !el.classList.contains(cls)
               });
            });
        });
    });

Вы бы лучше проверяли пришедшее не так:

str_replace('  ', '  ', nl2br(print_r($_POST, true)));

ибо это глупость, а так:

echo '<pre>';
print_r($_POST);

тогда бы картина происходящего была бы видна в полной мере.

Клиент выберет первую группу, выберет в ней, затем выберет вторую группу и в ней выбор. Вопрос - что получит сервер и что ему надо делать в этом случае?

А так, я могу запроса обмануть сервер, если он "не думает".

Ну, если обмануть, то результат error.

timko_ya,
А не лучше ли чекбоксы заменить на радио?
Со сбросом checked на дочерних радио при переключении

Это как?

Ох уж эти пионеры :) Я попробую пояснить на примере, почему все вами показанное, то есть и представление данных, и следовательно ожидания на сервере, и клиентский код, это сплошная глупость. ;)

Не важно что, важно как. Пусть есть в базе две группы "менов": "Мачо" и "Ботаники". Каждая эта группа описана в таблице и имеет уникальный идентификатор:

1, Мачо
2, Ботаники

Члены этих групп описываются в связанных таблица, то есть, для каждой группы своя таблица ее членов, которые также имеют уникальный идентификатор:

Члены группы Мачо

1, Джон
2, Джек
3, Арнольд

Члены группы Ботаники

1, Томас
2, Чарли

То есть, идентификаторы членов разных групп могут совпадать. Задача - получить выбор одного пользователя какой либо группы. Для этого имена полей формы будут связаны по идентификатору группы, а значения их будут равны идентификаторам члена группы. Но если отдать форму как есть:

<form id="f1">
    <fieldset>
        <legend>Мачо</legend>
        <label><input type="radio" name="group[1]" value="1" /> Джон</label>
        <label><input type="radio" name="group[1]" value="2" /> Джек</label>
        <label><input type="radio" name="group[1]" value="3" /> Арнольд</label>
    </fieldset>
    <fieldset>
        <legend>Ботаники</legend>
        <label><input type="radio" name="group[2]" value="1" /> Томас</label>
        <label><input type="radio" name="group[2]" value="2" /> Чарли</label>
    </fieldset>
</form>

То выбрать только одного из из любой группы не получится, при этом лишние элементы серверу не нужны. Выход - сбрасывать выбор в группе противоположной текущей:

<form id="f1">
    <fieldset>
        <legend>Мачо</legend>
        <label><input type="radio" name="group[1]" value="1" /> Джон</label>
        <label><input type="radio" name="group[1]" value="2" /> Джек</label>
        <label><input type="radio" name="group[1]" value="3" /> Арнольд</label>
    </fieldset>
    <fieldset>
        <legend>Ботаники</legend>
        <label><input type="radio" name="group[2]" value="1" /> Томас</label>
        <label><input type="radio" name="group[2]" value="2" /> Чарли</label>
    </fieldset>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    $('#f1').on('change', 'input:radio', function() {
        $(this).closest('fieldset').siblings().find('input').prop('checked', false)
    }) 
});
</script>

Чего-то в этой форме делать "disabled" бессмысленно, так как не даст нужного результата.

Но если члены группы будут содержаться в одной таблице, тогда кроме идентификатора и имени, они должны иметь и идентификатор группы, которой принадлежат. При этом идентификатор члена группы будет у каждого уникален.

Таблица членов групп:

1, 1, Джон
2, 1, Джек
3, 1, Арнольд
4, 2, Томас
5, 2, Чарли

А форма будет возвращать серверу нужное и без всяких скриптов

<form id="f1">
    <fieldset>
        <legend>Мачо</legend>
        <label><input type="radio" name="group" value="1" /> Джон</label>
        <label><input type="radio" name="group" value="2" /> Джек</label>
        <label><input type="radio" name="group" value="3" /> Арнольд</label>
    </fieldset>
    <fieldset>
        <legend>Ботаники</legend>
        <label><input type="radio" name="group" value="4" /> Томас</label>
        <label><input type="radio" name="group" value="5" /> Чарли</label>
    </fieldset>
</form>

Сервер по уникальному идентификатору члена группы может узнать к какой группе он принадлежит. Какие-то сценарии делающие недоступными кнопки в форме такой просто бессмысленны, если уж и щелкать по флажку, то ради только скрывать/показывать ту или иную группу.

У вас значения как раз и имеют уникальные идентификаторы, и ваши действия на клиенте не понятно ради чего.

Понял. А теперь глянь, какой у меня велосипед. Я просто не такой профи, что в интернете на форумах имеется, то я и использую, либо что-то переделываю под себя. https://yadi.sk/d/1goyzXcv3Teuhw, там архив, форма полностью, и обработчик. Интересно было бы услышать твое мнение. Может после проверки всего этого, поскидываешь мне ссылки на те материалы, которые мне нужно выучить и понять. Если конечно же тебе несложно.

В интернете "всего" есть, но прежде надо озадачится нужно ли из всего вообще что-то. У вас получается, что сервер может принять любую залипуху и потом с ней разбираться, ибо представление ваших данных "от фонаря". А ведь сервер должен знать какие данные в той или иной формой должны прийти. На основе этих знаний он должен проверить их.

Ну будет проверки, я занят на данный момент.

Боюсь, что этого сделать невозможно - знать надо о реляционных базах данных, именно база задает архитектуру данных и является основой "знаний" сервера чего ему ожидать от клиента. А это обширный материал и на что конкретно давать ссылку я не знаю. Нужно знать о том, что сервер обязан проверять/фильтровать вход, а это изучение серверного языка. Для решения вопросов на клиенте потребуются клиентские сценарии, а это надо изучать клиентский язык.

Ну и самое главное, это учится мыслить предметно.