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

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

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@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

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

Решение