Работа с формами

@dpts · Регистрация: 18.06.2014

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<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
если какие-то из чекбоксов отключены, то обработчику значений detail передается меньше чем значений material на количество отключенных чекбоксов.

Как сделать так, чтобы если чекбокс отключен (и detail не передается обработчику), то и соответствующий этому чекбоксу material тоже обработчику не передавался. Чтобы обработчику всегда уходило равное количество значений detail и material?

Добавлено через 20 часов 55 минут
К сожалению там ничего похожего нет.

Теоретически я придумал, как упростить задачу, надо проверять состояние каждого чекбокса, и если он включен, - то его value должно быть равно указанному (как в примере), если он выключен, его value должно быть равно нулю, тогда обработчику всегда будет передаваться одинаковое количество detail и material.

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

@Lazy_Den · 15.06.2015, 10:38

Сообщение от dpts

Как сделать так, чтобы если чекбокс отключен (и detail не передается обработчику), то и соответствующий этому чекбоксу material тоже обработчику не передавался.

Если checkbox checked = false, то соответствующий select - disabled = true.

@dpts · 15.06.2015, 10:43 **[ТС]**

Логично. Можно в виде конкретного кода? т.к. я ноль.

@Lazy_Den · 15.06.2015, 10:55

Сообщение от dpts

Можно в виде конкретного кода?

Что-то вроде такого.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
    }
}

Доработаете, если нужно, уже сами.

@Thisman · 15.06.2015, 11:01

Я бы посоветовал не маяться и использовать для этого чуть более сложную структуру, но более подходящую. Я сейчас говорю о data-bindinge. Связывание данных + шаблонизатор. Шаблонизатор будет решать, что нужно показывать, а что нет, что нужно дизейблить, а что нет. Данные пусть будут в виде объекта, которые и является правилом для шаблона. Это намного упростит управление и отображение элемента.

Шаблонизатор можно взять например этот
Связывание написать свое ( довольно простое, зато не придется качать для этого фреймворк или вчитываться в Object.observe )

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
/*
    render - ф-ция отображающая шаблон
    @data - наш объект
    При событии change вызывайте ф-цию рендер и передавайте ей объект data
    перед этим обновляя его
*/
 
input.onchange = function () {
   var field = this.getAttrobute("data-name") // каждому полю поставьте атрибут, который идентифицирует его
   data[field] = this.checked;
   render(data);
}

Главное правильно составить объект data + а в шаблоне просто указывать, если поле true, то показываем, если нет, то не показываем.
Как то так

@dpts · 15.06.2015, 11:05 **[ТС]**

На самом деле важно, чтобы с формы отдавалось равное количество detail-ов и material-ов, чтобы потом из них построить двумрный массив.

@Thisman · 15.06.2015, 11:30

dpts, вот пример, использовал JQ 2.1.1

Без шаблонизаторов и выкрутасов

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class='control'>
    <input checked type='checkbox' data-point="100">100</input>
    <input checked type='checkbox' data-point="200">200</input>
    <input checked type='checkbox' data-point="300">300</input>
    <input checked type='checkbox' data-point="400">400</input>
  </div>
  <div class='controled'>
    <input type='radio' point="100">101</input>
    <input type='radio' point="100">101</input><br>
    <input type='radio' point="200">201</input><br>
    <input type='radio' point="300">301</input><br>
    <input type='radio' point="400">401</input><br>
  </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
var control = $(".control input");
control.change(function () {
  var controled = $(".controled input[point='" + $(this).attr('data-point') + "']");
  if(this.checked) {
    controled.each(function (i, el) { $(el).attr('disabled', false) });
  } else {
    controled.each(function (i, el) { $(el).attr('disabled', true) });
  }
 
});

@dpts · 15.06.2015, 11:34 **[ТС]**

Для Lazy_Den.

Благодарю, работает.
Только с самого начала не подумал, получается что к каждому чекбоксу с "руковами" нужно приделать еще по 1 input type="hidden" name="detailmod" value="0" (чтобы обработчику на сервере полноценный массив передавался)
как доработать вашу функцию, чтобы этот hidden тоже отключался вместе с material-ом?

ps. я полный ноль в js

@Lazy_Den · 15.06.2015, 23:42

Сообщение от dpts

как доработать вашу функцию

Чтоб доработать, нужно знать, где эти скрытые поля находятся. Но вы и сами можете закончить, т.к. "disabled" распространяется и на hidden-поля.

@dpts · 16.06.2015, 05:13 **[ТС]**

Для Lazy_Den:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
  <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>
                <input type="hidden" name="detailmod" value="0">
            </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>
                <input type="hidden" name="detailmod" value="0">
            </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>

Вот так вот.
Но тут заметил еще одну тонкость, если в первых двух деталях, которые "рукава" поля detailmod скрытые, то в последнем, про "молнию" - это радиокнопки.

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

Включая или отключая чекбоксы пользователь говорит какая деталь жилетки ему нужна или не нужна (detail), из чего она должна быть сделана (material) и какой у нее функционал/вариант исполнения, если он есть (detailmod).

Если все чекбоксы включены, серверному скрипту передается три тройки значений detail | detailmod | material,
которые серверный скрипт простым циклом может записать в массив и дальше обрабатывать как-то,

Беда в том, что если чекбокс выключен то он вообще на сервер не передается. То есть допустим если первый чекбокв выключен, на сервер о нем уйдет не тройка detail | detailmod | material, а только пара detailmod | material, соответственно простым циклом записать серверным скриптом полученные данные в массив не получится.

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

Деталей из которых состоит изделие может быть и больше трех, и вариантов исполнения каждой детали может быть больше 3.

Есть изделия из десятка деталей, у каждой из которых 10-15 вариантов исполнения.

@Lazy_Den · 16.06.2015, 07:02

Сообщение от dpts

Вот так вот.

Вы зря напрягались, т.к. я вас прекрасно понял и уже дал наводку выше, как это сделать. Чтоб поменьше было мороки, перенесите каждый "detailmod" под связанный с ним "detail"

HTML5
1
2
3
4
<div style="float: right;width: 20px;">
    <input name="detail" type="checkbox" checked value="1">
    <input type="hidden" name="detailmod" value="0">
</div>

Понту его держать где-то отдельно - вообще нет. И дописываем в код всего одну строку: this.nextElementSibling.disabled = !this.checked;. Получем:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
        this.nextElementSibling.disabled = !this.checked; // вот эта строка, которую вы и сами смогли бы
                                                        // написать, основываясь на моих подсказках выше
    }, false);
}
 
function closest(el, fn) {
    while (el) {
        if (fn(el)) return el;
        el = el.parentNode;
    }
}

Добавлено через 49 минут
UPD В общем, еще раз испугался вашей разметке, подумал, что дальше может быть еще "круче" и предлагаю такой вариант, в надежде, что хоть группы связанных элементов, будут оставаться в одном <tr>:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var details = zakaz.detail;
for (var i = 0; i < details.length; i++) {
    details[i].addEventListener('change', checkout, false);
}
function checkout() {
    var isChecked = !this.checked,
        tr = closest(this, function (el) {
            return el.tagName.toLowerCase() == 'tr';
        });
    var params = tr.querySelectorAll('[name=material], [name=detailmod]');
    for (var i = 0; i < params.length; i++) {
        params[i].disabled = isChecked;
    }
}
 
function closest(el, fn) {
    while (el) {
        if (fn(el)) return el;
        el = el.parentNode;
    }
}

@dpts · 16.06.2015, 08:06 **[ТС]**

Для Lazy_Den.

Ну да - разметка осьминожья. Суть в том, что пытаемся немного докрутить давным-давно самописную CRM, сделанную на ASP+VBscript.

Добавлено через 52 минуты
Работает. Спасибо большое/

@BANO · 17.06.2015, 22:50

Не по теме:

dpts, конечно дело не моё, но всё-таки можно использовать [nick]Lazy_Den[/nick],
или просто нажать на ник человека в левом столбе, тогда ник вставится в текст автоматом

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@dpts 0 / 0 / 0 Регистрация: 18.06.2014 Сообщений: 20
	15.06.2015, 10:43 [ТС]
	Логично. Можно в виде конкретного кода? т.к. я ноль. 0

@dpts 0 / 0 / 0 Регистрация: 18.06.2014 Сообщений: 20
	15.06.2015, 11:05 [ТС]
	На самом деле важно, чтобы с формы отдавалось равное количество detail-ов и material-ов, чтобы потом из них построить двумрный массив. 0

@dpts 0 / 0 / 0 Регистрация: 18.06.2014 Сообщений: 20
	15.06.2015, 11:34 [ТС]
	Для Lazy_Den. Благодарю, работает. Только с самого начала не подумал, получается что к каждому чекбоксу с "руковами" нужно приделать еще по 1 input type="hidden" name="detailmod" value="0" (чтобы обработчику на сервере полноценный массив передавался) как доработать вашу функцию, чтобы этот hidden тоже отключался вместе с material-ом? ps. я полный ноль в js 0

@dpts 0 / 0 / 0 Регистрация: 18.06.2014 Сообщений: 20
	16.06.2015, 08:06 [ТС]
	Для Lazy_Den. Ну да - разметка осьминожья. Суть в том, что пытаемся немного докрутить давным-давно самописную CRM, сделанную на ASP+VBscript. Добавлено через 52 минуты Работает. Спасибо большое/ 0

@BANO
	17.06.2015, 22:50
	Не по теме: dpts, конечно дело не моё, но всё-таки можно использовать [nick]Lazy_Den[/nick], или просто нажать на ник человека в левом столбе, тогда ник вставится в текст автоматом 0

Работа с формами

Решение