Как передать информацию из одной формы в другую?

Question

[Xbbv1]

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

Как лучше передавать инфу из формы с чекбоксами в форму в модальном окне?
P.S. Форма в модальном окне является конечной точкой, после нажатия инфа передаётся на сервер. До этого на сервер ничего не передаётся.

Моя мысль - при нажатии на чекбокс = присваиваем ему класс. При нажатии на кнопку запускаем цикл, который ищет чекбоксы по указанному классу и вставляет их в новую форму

Answer 1

[Максим Тимофеев]

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

Answer 2

[Дмитрий Беляев]

Во-первых, чекбокс можно переключить не только кликом
для отлова изменения есть событие change

Во-вторых, класс не нужен, у нативного DOMNode чекбокса есть свойство checked (boolean) отображающее "включенность" чекбокса, а так же позволяющее ее изменять

В-третьих, мысль проверять чекбоксы при открытии модалке весьма здравая, тем более включенные чекбоксы можно получить через селектор :checked

Answer 3

[Funny_Guo]

строкой бинарной, если был выбран чекбокс то 1 на его позиции, иначе 0.
Цикл будет что то вроде
var stringToTransf="";
foreach(checkbox){
if (checkbox.Checked)
stringToTransf =stringToTransf+"1";
else
stringToTransf = stringToTransf +"0"; }
по итогу переменную stringToTransf подсовываешь на сервер и разбираешь

Comments

[Funny_Guo]

ну и соответственно кнопочка, отправить на сервер, которая вызывает функцию с вот этим циклом

[Никита]

Зачем грузить бекенд этим мусором, на jquery решается в 5-10 строк, может даже меньше если постараться

[Funny_Guo]

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

Answer 4

[Никита]

Давненько делал:

$('.radio-btn label input[type="checkbox"]').on('change', function () {
    var check1 = $('#1').prop('checked'),
        check2 = $('#2').prop('checked'),
        check3 = $('#3').prop('checked'),
        check4 = $('#4').prop('checked'),
        check5 = $('#5').prop('checked'),
        check6 = $('#6').prop('checked'),
        check7 = $('#7').prop('checked'),
        check8 = $('#8').prop('checked');

    $('#form-check').find('input[name="1"]').attr('value', check1);
    $('#form-check').find('input[name="2"]').attr('value', check2);
    $('#form-check').find('input[name="3"]').attr('value', check3);
    $('#form-check').find('input[name="4"]').attr('value', check4);
    $('#form-check').find('input[name="5"]').attr('value', check5);
    $('#form-check').find('input[name="6"]').attr('value', check6);
    $('#form-check').find('input[name="7"]').attr('value', check7);
    $('#form-check').find('input[name="8"]').attr('value', check8);
  })

Тут можно еще немного оптимизировать, но для простоты понимая пойдет. Вместо #form-check свою модалку воткините. В данном варианте у меня заготовленные input[type="hidden"], если у вас модалка общая, можете создавать/удалять их. Потом через php обрабатываете это и выбрасываете пустые варианты