Обработка чекбоксов, радио-кнопок, и селектов

[dpts]

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

<form name="zakaz">
Жилет меховой:&nbsp;<input name="isdel" type="text" size="4" value="3">&nbsp;шт.
<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?

[dpts]

Как вариант, как сделать чтобы если чекбокс включен его value равнялось указанному, а если выключен - его value равнялось нулю?

[Sigizmund2012]

Как вариант, как сделать чтобы если чекбокс включен его value равнялось указанному, а если выключен - его value равнялось нулю?

if (!checkbox.checked) {
        checkbox.value = 0;
    }

[dpts]

if (!checkbox.checked) {
        checkbox.value = 0;
    }

А можно подробнее? Я практически полный ноль в JS.

[Sigizmund2012]

dpts,
Этот блок кода проверяет, отмечен чекбокс или нет, и если нет, задаёт ему value = 0. Стандартная синтаксическая конструкция для любого языка.

[dpts]

dpts,
Этот блок кода проверяет, отмечен чекбокс или нет, и если нет, задаёт ему value = 0. Стандартная синтаксическая конструкция для любого языка.

Это понятно. В какое место его - этот блок кода засадить?
Можно как-то на примере приведенной выше формы?

[Sigizmund2012]

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 у инпутов должен быть уникальным, исключая радиокнопки.

[dpts]

У вас сама форма странная какая-то, атрибут name у инпутов должен быть уникальным, исключая радиокнопки.

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

[dpts]

Добавил перед формой:

<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.

[Sigizmund2012]

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

Это не вопрос предпочтений или конкретно вашей формы. Так должно быть по стандарту, данные отправляются на сервер в виде name&value. Как серверный скрипт корректно вашу форму обработает, если у вас name одинаковый? http://htmlbook.ru/html/input/name