как передать значения радиокнопок из формы на странице в модальное окно fancybox2?

Не могу сообразить как передать значения радиокнопок из формы на странице в модальное окно fancybox2

У Вас окно вызывается iframe или inline?

iframe

@ufabooks То есть у Вас в action формы прописан адрес целевой страницы, на которую нужно передать значения?
Тогда там просто сниппетом вытащите:

return $_REQUEST['fieldname'];

Или у Вас сама форма открывается в модальном окне по ссылке? Тогда прямо у ссылки укажите параметр:

<a href="[[~123? &fieldname=`***`]]">...</a>

А на странице с формой выводите снова через тот же сниппет, или, если стоит pdoTools, то тегом:

[[!#REQUEST.fieldname]]

Мы готовы попробовать оба варианта:
http://testfactura.ffactura.ru/collection/type-in-rect.html

Сделали 2 кнопки Заказать:

<a href="[[~15]]?mod=[[*pagetitle]]&mod2=[[*id]]" class='various' 
data-fancybox-type="iframe"><button class='button silver large ' 
 >Заказать</button></a>
<button class='button silver large various' data-fancybox-type="iframe" 
data-fancybox-href="[[~15]]">Заказать</button>```

1) Заказать (верхняя) является ссылкой.
Как тут с помощью ссылки передать значение формы на страницу в action?

2) Заказать (нижняя) является обычной кнопкой с data-fancybox-href.
Т.е. в action значение формы не передаётся. Передаётся просто html код 
этой страницы, а не значения.


собственно надо передать выбор варианта расцветки со страницы в модальное окно
и чтобы в нем селект с номерами этих расцветок установился в нужное значение

В Вашем случае удобнее инлайн.

<a href="#form" class="various" ><button class='button silver large ' 
 >Заказать</button></a>
 
 <div style="display:none">
     <div id="form">
         <form>
              <input type="hidden" name="mod" value="[[*pagetitle]]"/>
              <input type="hidden" name="mod2" value="[[*id]]"/>
              <input type="hidden" name="field" value="" id="field"/>
              ..............................
         </form>
     </div>
 </div>

ну и скрипт:

<script>
$(document).ready(function(){ 
   $(".pro_val_one").change(function(){
       $("#field").val($(this).val());
   });
});
</script>

@ufabooks 1) Это дополнительный <form> к основному?
И зачем она display:none если итак содержит скрытые input?

  1. Что за значение pro_val_on ? Это связь с нашей радиокнопкой?

Может вы напишите общий код формы и отдельно код страницы в модальном окне?

Вместо многоточия — код Вашей формы заявки. Отдельной страницы не нужно — все на странице товара.
display:none — скрытие блока с этой формой. Она откроется по клику на ссылке с классом various или какой назначите (см. документацию fancybox).

Скрытые поля mod и mod2 — это Ваши поля в форме, которые автоматом заполняются заголовком страницы и ее ID (у Вас сейчас они передаются в GET-запросе на отдельную страницу с формой). А поле field заполняется как раз при выборе той или иной радиокнопки.
За это отвечает скрипт, который при изменении элемента с классом pro_val_on (это и есть Ваши радиокнопки) берёт его значение и прописывает в поле field отправляемой формы заявки.

Мы собираем данные из формы:

<form action="[[~[[*id]]]]" method="post" class="form">

<input type="hidden" name="mod" value="[[*pagetitle]]" />
<input type="hidden" name="mod2" value="[[*id]]" />
<input type="hidden" name="field" value="" id="field"/>

.....

</form>

В модальном окне в коде этой же страницы делаю новую форму:

<form action="[[~[[*id]]]]" method="post" class="rf" id="contactFormHeader">```

.....

в ней вызываю снипет:

[[!getOption]]

с содержимым:

echo $a=$_POST['fact'];
echo $b=$_POST['field'];```

  • обе переменные пустые.
    Что не так?

...

</form>

Если все делать без модальных окон и без js то все прекрасно передаётся.

Не надо ничего никуда собирать и передавать.
У Вас на странице самого товара уже будет форма заявки. То есть вот эту форму просто вставьте на страницу товара в любом месте в блок с ID="form" и скройте все этим самым display:none:

 <div style="display:none">
     <div id="form">
         <form>
            Тут код Вашей формы заявки
         </form>
     </div>
 </div>

Метод Fancybox inline и подразумевает то, что в модальное окно выводится контент, который находится на этой же странице ). Он найдет блок с id="form" (ведь он прописан в href у ссылки) и откроет его содержимое в модальном окне - то есть Вашу форму заявки.

А то, что передавалось у Вас GET-запросом на отдельную страницу (которая открывалась в модальном окне), уже не нужно — форма заявки-то теперь находится на самой странице товара и можно все прописать напрямую:

<input type="hidden" name="mod" value="[[*pagetitle]]"/>
<input type="hidden" name="mod2" value="[[*id]]"/>
<input type="hidden" name="field" value="" id="field"/>
..............................

И Вам нужно только вытащить какую радиокнопку нажал посетитель, а это делает JS-скрипт. Результат своей работы он вписывает в третье скрытое поле Вашей формы — field. Соответственно, в шаблоне письма так и прописывайте:

Вариант расцветки: [[+field]]

Погоди. ты не совсем понял. надо чтобы при выборе варианта расцветки на странице товара (там по номерам они) - при открытии окна чтобы в селекте с расцветками номер устанавливался на выбранное ранее значение.
То есть выбрал на странице товара номер 2 - открыл окно - и там уже в селекте светится опция номер 2.
а сейчас этого не происходит.
не коррелируется выбор на странице и в селекте модального окна

Сейчас то, что выбрано из радиокнопок прописывается в поле field именно модального окна (форма заявки у Вас там).
И оно работает: alt text
Если нужно просто вывести, то сделайте в форме блок:

<p>Расцветка: <span class="color">1</span></p>

И измените скрипт:

<script>
$(document).ready(function(){ 
   $(".pro_val_one").change(function(){
       $("#field, .color").val($(this).val());
   });
});
</script>

Кстати, поскольку у Вас по умолчанию стоит выбранный первый пункт, в форме у поля пропишите сразу так:

<input type="hidden" name="field" value="1" id="field"/>

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

Сорри, в скрипте ошибся:

<script>
$(document).ready(function(){ 
   $(".pro_val_one").change(function(){
       $("#field").val($(this).val());
       $(".color").html($(this).val());
   });
});
</script>

Опять мы не поняли друг друга) выбранное поле рацветки field передается в окно - да
но мне же нужно не просто текстом там его вывести
в окне есть селект который дублирует выбор расцветки на странице
вот этот

 <select style="color:#000" id="numb" name="numb" value="[[!+fi.numb]]">
  [[getImageList? &tvname=`clr`  &tpl=`urlTplForm` &docid=`[[*id]]` ]]

 </select>

вот мне нужно чтобы при открытии окна выбранная строка этого селекта соответствовала значению этого поля field 
выбираю чекбоксом на странице расцветку 3 - открываю окно - и там в селекте сразу стоит строка N3 
а сейчас всегда первая

А для чего Вам в окне еще раз повторять то, что человек уже сделал? Он же уже выбрал расцветку — просто выведите эту информацию тут не селектом, а span-ом, как я описал ранее:
alt text

Но если так уж нужно в окне выбирать, то попробуйте сделать так:

<script>
$(document).ready(function(){ 
   $(".pro_val_one").change(function(){
       var num = $(this).val();
       $("#field").val(num);
       $(".color").html(num);
       $("#numb option").each(function(){
            if($(this).val() == num) {
                $(this).attr("selected", "selected");
                
            }
        });
   });
});
</script>```

да вот такая задача) чтобы еще и в окне можно было бы изменить ранее сделанный выбор

так тоже не срабатывает
точнее при открытии окна нужная опция не выбрана в селекте
но стоит нажать на селект - как тут же выбирается сама при клике

Да нет, скрипт как раз работает:
alt text
Вот тестик: http://rpa-design.ru/t.html
Добавил там одну строчку:

<script>
$(document).ready(function(){ 
   $(".pro_val_one").change(function(){
       var num = $(this).val();
       $("#field").val(num);
       $(".color").html(num);
       $("#numb option").each(function(){
            if($(this).val() == num) {
                $("#numb option").removeAttr("selected");
                $(this).attr("selected", "selected");
            }
        });
   });
});
</script>

на тесте в пределах одной страницы работает да
а в модальном окне не отрисовывается

Fancybox лень ставить - с Сolorbox (практически то же самое) все прекрасно работает: http://rpa-design.ru/t.html

У Вас из-за оформления селекта показывает не то, что нужно. Стоит скрипт, который скрывает сам селект (ставит ему прозрачность), а поверх накладывает SPAN, где прописан первый пункт:
alt text
Тут уж или оформление делать иначе, или копаться в скрипте-украшателе.

Похоже, подключение к Форум | MODX Shopkeeper было разорвано, подождите, пока мы пытаемся восстановить соединение.