Обработка чекбоксов, радио-кнопок, и селектов
Есть форма, позволяющая указать состав изделия и материалы для каждой детали, условно выглядит так:
<form name="zakaz"> Жилет меховой: <input name="isdel" type="text" size="4" value="3"> шт. <table> <tr> <td> Рукав левый <div style="float: right;width: 20px;"> <input name="detail" type="checkbox" checked value="1"> </div> </td> <td> <select name="material"> <option value="1">Кожа</option> <option value="2">Мех</option> <option value="3">Ткань</option> </select> </td> </tr> <tr> <td> Рукав правый <div style="float: right;width: 20px;"> <input name="detail" type="checkbox" checked value="2"> </div> </td> <td> <select name="material"> <option value="1">Кожа</option> <option value="2">Мех</option> <option value="3">Ткань</option> </select> </td> </tr> <tr> <td> <b>Застежка молния</b> <div style="float: right;width: 20px;"> <input name="detailmod" type="radio" checked value="4"> </div> <div style="float: right;width: 20px;"> <input name="detail" type="checkbox" checked value="3"> </div> <table> <tr> <td> Пуговицы <div style="float: right;width: 20px;"> <input name="detailmod" type="radio" checked value="5"> </div> </td> </tr> <tr> <td> Кнопки <div style="float: right;width: 20px;"> <input name="detailmod" type="radio" checked value="6"> </div> </td> </tr> </table> </td> <td> <select name="material"> <option value="1">Пластик</option> <option value="2">Металл</option> <option value="3">Дерево</option> </select> </td> </tr> </table> <br> <center><input type="submit" value="Далее"></center> </form> Форма позволяет пользователю указать какие части изделия он хочет заказать, в каком варианте (радиокнопки про застежку молнию/пуговицы/кнопки) и из какого материала каждая деталь, а какие он заказывать не хочет. По умолчанию выставлена полная комплектация (чекбоксы включены). Когда все чекбоксы включены, - форма передает обработчику парные данные: Деталь/Материал (количество переданных обработчику detail равно количеству material), соответственно обработчиком можно посчитать пары и запихать их в массив не особо раздумывая. Если, допустим, один из чекбоксов отключить, то обработчику передастся на 1 detail меньше чем количество material. Обработчик получит 2 шт. detail и 3 шт. material, соответственно загнать эти данные в массив, простым циклом не получится, без смещения материалов относительно деталей. В связи с этим вопрос. Раз при отключенном чекбоксе обработчику не передается соответствующий detail, как сделать, чтобы и соответствующий этому detail material тоже не передавался, и кол-во переданных detail всегда равнялось кол-ву переданных material? |
upd предыдущего
Как вариант, как сделать чтобы если чекбокс включен его value равнялось указанному, а если выключен - его value равнялось нулю?
|
Цитата:
if (!checkbox.checked) { checkbox.value = 0; } |
Цитата:
|
dpts,
Этот блок кода проверяет, отмечен чекбокс или нет, и если нет, задаёт ему value = 0. Стандартная синтаксическая конструкция для любого языка. |
Цитата:
Можно как-то на примере приведенной выше формы? |
dpts,
Типа того: var form = document.getElementsByName('zakaz')[0]; form.onsubmit = function (e) { var checkboxes = form.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { if (!checkboxes[i].checked) { checkboxes[i].value = '0'; } } }; У вас сама форма странная какая-то, атрибут name у инпутов должен быть уникальным, исключая радиокнопки. |
Цитата:
|
Добавил перед формой:
<script type="text/javascript"> var form = document.getElementsByName('zakaz')[0]; form.onsubmit = function (e) { var checkboxes = form.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { if (!checkboxes[i].checked) { checkboxes[i].value = '0'; } } }; </script> Не помогло, также если чекбокс отключаешь, уменьшается количество detail. |
Цитата:
|
Цитата:
По-этому мне и надо, чтобы detail-ов было столькоже, сколько и material-ов. |
Цитата:
|
Цитата:
вот тогда и вопрос, как если чекбокс отключен, то соответствующий ему material тоже не отправлять на сервер, чтобы на червер приходили одинаковые количества detail и material& |
Еще вариант как передавать одинаковое количество
Еще, как вариант выхода
к каждому checkbox приделать input type="hidden" value="..." и в зависимости от состояния соответствующего чекбокса менять value у hidden и на сервере обрабатывать массив hidden-ов. Вотпрос, как менять value у hidden-ов? |
Цитата:
|
|
Цитата:
Мне предложили вроде рабочее решение, выглядит так: var details = zakaz.detail; for (var i = 0; i < details.length; i++) { details[i].addEventListener('change', function () { var td = closest(this, function (el) { return el.tagName.toLowerCase() == 'td'; }); var material = td.nextElementSibling.querySelector('[name=material]'); material.disabled = !this.checked; }, false); } function closest(el, fn) { while (el) { if (fn(el)) return el; el = el.parentNode; } } Если отключается чекбокс, отключается и material. вроде все хорошо, все работает (чекбокс - не передается, материал - тоже не передается). Но сразу не подумал. Обработчику же должен передаваться массив из detail-ов, detailmod-ов, material-ов. Поэтому пришлось к левому и правому рукавам добавить еще input type="hidden" name="detailmod" value="0". Как надо дописать приведенный JS, чтобы он еще и detailmod не передавал? |
Часовой пояс GMT +3, время: 03:52. |