Посоветуйте плагин для создания динамических форм.

Тема в разделе "Формы", создана пользователем kanalex, 05.09.2011.

  1. Offline

    kanalex Недавно здесь

    Регистрация:
    25.01.2011
    Сообщения:
    10
    Симпатии:
    0
    Пол:
    Мужской
    Подскажите, чем можно в джумле сделать форму подобную такой:
    http://miracletour.com/1192/Nepal_Butan.html (в самом низу страницы)

    Я уж накопал всяких скриптов. Просто в ШТМЛе могу сделать такую форму. Но из всего, что нашел под джумлу, как-то ничего не подходит:(
    Все, что нашел завязано на базу данных. Мне вообщем-то не надо хранить результаты заполнения этих форм.

    Заполнил - отправил и все.

    Joomla 1.5.22
     
    Последнее редактирование: 05.09.2011
  2.  
  3. Bekas
    Offline

    Bekas Недавно здесь

    Регистрация:
    05.09.2011
    Сообщения:
    30
    Симпатии:
    1
    Пол:
    Мужской
  4. Offline

    kanalex Недавно здесь

    Регистрация:
    25.01.2011
    Сообщения:
    10
    Симпатии:
    0
    Пол:
    Мужской
    Замечательно. Я пробовал Chronoforms, но как созадть динамическую табличную часть, как это сделано в примере по ссылке в моем первом сообщении?
    т.е. в заявке может быть один человек, а может быть n-человек. Пользователь сам добавляет нужное количество строк в таблицу на форме.
     
  5. Offline

    Artie Недавно здесь

    Регистрация:
    09.02.2010
    Сообщения:
    75
    Симпатии:
    1
    Пол:
    Мужской
    Пакопай Breezingforms. Что-то подобное вроде делал.
     
  6. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    kanalex, RSForm Pro. Формы практически любой сложности.
     
  7. Offline

    kanalex Недавно здесь

    Регистрация:
    25.01.2011
    Сообщения:
    10
    Симпатии:
    0
    Пол:
    Мужской
    RS Forms PRO я смотрел. Но там создание формы завязано на заведение полей в базе данных.
    Если форма статическая, то все ок, но мне надо чтобы пользователь сам добавлял столько строк, сколько надо.
    Пока не догоняю как это реализовать:(
    Может есть какие уроки про RS Forms?
     
  8. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    каких строк?
     
  9. Offline

    kanalex Недавно здесь

    Регистрация:
    25.01.2011
    Сообщения:
    10
    Симпатии:
    0
    Пол:
    Мужской
    Часть формы в виде таблицы. Одна строка в этой таблице сделана. А остальные пользователь сам добавляет сколько надо.
    Как в примере, который я приводил в первом своем сообщении.
     
    Последнее редактирование: 12.09.2011
  10. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    В Chronoforms, правда в админке, такая штука реализована. Там добавляешь поля в форму по мере редактирования формы, как раз то, что нужно. Смотреть как реализовано и потом уже прикручивать код в форму.
    Либо рыть документацию. jQuery
     
  11. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    Скоммуниздено отсюда:

    <a onclick="addPerson(); return false;" href="#">Добавить человека</a>
    <a onclick="delPerson(); return false;" href="#">Удалить человека</a>

    Код (CODE):
    1. // глобальные метки
    2. // колличество персон
    3. var personCount=0;
    4. // добавляем отображение ранее введеных значений в динамические элементы
    5. window.onload = showLastValues;
    6.  
    7. // отображает ранее заполненные поля персон и путей
    8. function showLastValues(){
    9.  
    10. var persons = document.getElementById("raPersons").value;
    11. var persVal = new Array();
    12. if (persons != ''){
    13.     persons = persons.split('\n');
    14.    
    15.     for (i=1; persons.length >= i; i++){
    16.    
    17.         // добавлем персону
    18.         addPerson();
    19.         persVal = persons[i-1].split(' | ');
    20.         // добавляем значения полей для персоны
    21.  
    22.         document.getElementById("fio"+i).value = persVal[0];
    23.         document.getElementById("passport"+i).value = persVal[1];
    24.         document.getElementById("passport_valid_till"+i).value = persVal[2];
    25.         document.getElementById("birthday"+i).value = persVal[3];
    26.         document.getElementById("roomsize"+i).value = persVal[4];
    27.     }
    28. }
    29.    
    30. // если нет никаких записей, то вставляем по одной пустой строке
    31. if (!personCount){
    32.     addPerson();
    33. }
    34.  
    35. }
    36.  
    37. // добавляем персону
    38. function addPerson(){
    39. // увеличиваем счетчик персон
    40. personCount++;
    41.  
    42. var parent = document.getElementById('persons');
    43.  
    44. // создаем объединяющий DIV
    45. newPerson = document.createElement('div');
    46. newPerson.id = 'person_'+personCount;
    47. newPerson.className = "person";
    48.  
    49. // создаем поля для новой персоны
    50.  
    51. // создаем номерацию полей
    52. numP = document.createElement('p');
    53. numP.className = "numb";
    54.     var numSpan = document.createElement('span');
    55.         var text = personCount+".";
    56.         var textNode = document.createTextNode(text);
    57.     numSpan.appendChild(textNode);
    58. numP.appendChild(numSpan);
    59.  
    60. //создаем ФИО
    61. fioP = document.createElement('p');
    62. fioP.className = "name";
    63.     var fioLabel = document.createElement('label');
    64.     fioLabel.setAttribute("for","fio_"+personCount);
    65.         var fioInput = document.createElement('input');
    66.         fioInput.type = "text";
    67.         fioInput.id = "fio"+personCount;
    68.         fioInput.name = "fio"+personCount;
    69.         fioInput.value = fioInput.value;
    70.     fioLabel.appendChild(fioInput);
    71. fioP.appendChild(fioLabel);
    72.  
    73. // создания поля паспотр
    74. pasportP = document.createElement('p');
    75. pasportP.className = "pass";
    76.     var pasportLabel = document.createElement('label');
    77.     pasportLabel.setAttribute("for","pasport"+personCount);
    78.         var pasportInput = document.createElement('input');
    79.         pasportInput.type = "text";
    80.         pasportInput.id = "passport"+personCount;
    81.         pasportInput.name = "passport"+personCount;
    82.         pasportInput.value = "";
    83.     pasportLabel.appendChild(pasportInput);
    84. pasportP.appendChild(pasportLabel);
    85.  
    86. // создание поля дата рождения
    87. dateP = document.createElement('p');
    88. dateP.className = "date";
    89.     var dateLabel = document.createElement('label');
    90.     dateLabel.setAttribute("for","birthday"+personCount);
    91.     dateLabel.className = "indate";
    92.         var dateInput = document.createElement('input');
    93.         //dateInput.maxlength = "10";
    94.         dateInput.type = "text";
    95.         dateInput.id = "birthday"+personCount;
    96.         dateInput.name = "birthday"+personCount;
    97.         dateInput.setAttribute = ('onFocus','10');
    98.         dateInput.value = "";
    99.         dateInput.className = "inDate";
    100.  
    101.         //кнопка для вызова календарика      
    102.         var personDateInput2 = document.createElement('input');
    103.         personDateInput2.type = "button";
    104.         personDateInput2.id = "trigger"+personCount;
    105.         personDateInput2.value = "...";
    106.         personDateInput2.className = "calbut";
    107.  
    108.     dateLabel.appendChild(dateInput);
    109.     dateLabel.appendChild(personDateInput2);
    110. dateP.appendChild(dateLabel);
    111.  
    112. // создания поля паспотр даты окончания
    113. pasportDo = document.createElement('p');
    114. pasportDo.className = "passd";
    115.     var pasportdLabel = document.createElement('label');
    116.     pasportdLabel.setAttribute("for","passport_valid_tillt"+personCount);
    117.     pasportdLabel.className = "indate";    
    118.     var pasportdInput = document.createElement('input');
    119.         pasportdInput.type = "text";
    120.         pasportdInput.id = "passport_valid_till"+personCount;
    121.         pasportdInput.name = "passport_valid_till"+personCount;
    122.         pasportdInput.value = "";
    123.        
    124.         //кнопка для вызова календарика  
    125.         var personDateInput3 = document.createElement('input');
    126.         personDateInput3.type = "button";
    127.         personDateInput3.id = "trigger2"+personCount;
    128.         personDateInput3.value = "...";
    129.         personDateInput3.className = "calbut";
    130.        
    131.     pasportdLabel.appendChild(pasportdInput);
    132.     pasportdLabel.appendChild(personDateInput3);
    133. pasportDo.appendChild(pasportdLabel);
    134.  
    135. // создания поля размещения select
    136. roomsizeo = document.createElement('p');
    137. roomsizeo.className = "room";
    138.     var roomsizeLabel = document.createElement('label');
    139.     roomsizeLabel.className = "last";
    140.     roomsizeLabel.setAttribute("for","roomsize"+personCount);
    141.         var roomsizeSelect = document.createElement('select');
    142.         roomsizeSelect.id = "roomsize"+personCount;
    143.         roomsizeSelect.name = "roomsize"+personCount;
    144.        
    145.         var newOpt = document.createElement('OPTION');
    146.         newOpt.value = 'SNGL';
    147.         newOpt.innerHTML += 'SNGL';
    148.         roomsizeSelect.appendChild(newOpt);
    149.        
    150.         var newOpt1 = document.createElement('OPTION');
    151.         newOpt1.value = '1/2 DBL';
    152.         newOpt1.innerHTML += '1/2 DBL';
    153.         roomsizeSelect.appendChild(newOpt1);
    154.        
    155.         var newOpt2 = document.createElement('OPTION');
    156.         newOpt2.value = '1/3 TRPL';
    157.         newOpt2.innerHTML += '1/3 TRPL';
    158.         roomsizeSelect.appendChild(newOpt2);
    159.        
    160.         roomsizeLabel.appendChild(roomsizeSelect);
    161. roomsizeo.appendChild(roomsizeLabel);
    162.  
    163.  
    164.  
    165.  
    166. // собираем все элементы в кучу
    167. newPerson.appendChild(numP);
    168. newPerson.appendChild(fioP);
    169. newPerson.appendChild(pasportP);
    170. newPerson.appendChild(pasportDo);
    171. newPerson.appendChild(dateP);
    172. newPerson.appendChild(roomsizeo);
    173.  
    174.  
    175. parent.appendChild(newPerson);
    176.  
    177. Calendar.setup(
    178.     {
    179.       inputField  : "birthday"+personCount,         // ID of the input field
    180.       ifFormat    : "%d.%m.%Y",    // the date format
    181.       button      : "trigger"+personCount       // ID of the button
    182.     }
    183.   );
    184.  
    185. Calendar.setup(
    186.     {
    187.       inputField  : "passport_valid_till"+personCount,         // ID of the input field
    188.       ifFormat    : "%d.%m.%Y",    // the date format
    189.       button      : "trigger2"+personCount       // ID of the button
    190.     }
    191.   );
    192.  
    193. }
    194.  
    195.  
    196.  
    197. // собираем информацию из динамическии созданных полей
    198. // и складываем информацию в одно поле
    199. function getDataForSubmit(){
    200.  
    201. var persons = new Array();
    202.  
    203. if (personCount <= 0){
    204.     alert('Довьте хотябы одну персону');
    205.     return false;
    206. }
    207.  
    208.  
    209. // 1. собираем информацию для персон
    210. for (i=1; i<=personCount; i++){
    211.     if ((document.getElementById("fio"+i).value == '') ||
    212.         (document.getElementById("passport"+i).value == '') ||
    213.         (document.getElementById("passport_valid_till"+i).value == '') ||
    214.         (document.getElementById("birthday"+i).value == '')){
    215.        
    216.         alert ('Данные о туристе должны быть заполнены ');
    217.         return false;
    218.     }else{
    219.     persons[i-1]=document.getElementById("fio"+i).value+" | "+
    220.     document.getElementById("passport"+i).value+" | "+
    221.     document.getElementById("passport_valid_till"+i).value+" | "+
    222.     document.getElementById("birthday"+i).value+" | "+
    223.     document.getElementById("roomsize"+i).value;
    224.     }
    225. }
    226.  
    227. // передаем собранные даные в одно поле
    228. document.getElementById("raPersons").value = persons.join("\n");
    229.  
    230. return true;
    231. }
    232.  
    233. function delPerson() {
    234.     if (personCount >= 2){
    235.      //var oneChild;
    236.      var mainObj = document.getElementById("persons");
    237.       oneChild = mainObj.childNodes[personCount];
    238.       mainObj.removeChild(oneChild);
    239.     personCount = personCount-1;
    240.     }
    241. }
     

Поделиться этой страницей

Загрузка...