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