Forums

Multiple Pages to 1 form

gatsu 30 Jan, 2009
Hello We are paid license holders and have greatly enjoyed your program we would like to ask if a more advanced system is possible

Is it possible to have multiple pages for 1 form? for example the following pic


As you can see we would like several steps to a form and have all the options chosen on pages 1 2 and 3 combined into the results of 1 form. Is this possible with chronoforms? If so how?
GreyHead 30 Jan, 2009
Hi Gatsu,

Yes that's possible - in two different ways. [list]
  • You can have a single form that uses a 'tabbed'' presentation. It is very simple to do this using Joomla's standard tabs.
  • You can have a multi-page form that submits and saves data after each page then re-displays the next page.
  • [/list]Both these formats have advantages and disadvantages. The tabbed presentation is much easier to code but has some problems with validation; the multi-page presentation is safer as the data is validated and saved at each step but more complex to code.

    Bob
    gatsu 31 Jan, 2009
    Multi-page is what we would be after. What are the necessary steps to do this?
    GreyHead 31 Jan, 2009
    Hi Gatsu,

    It goes something like this:

    1) in your form HTML use a switch statement and a hidden input to control which 'page' is displayed:
    <?php
    $page = JRequest::getInt('page', '0', 'post');
    $page++; // to get the current page
    switch ($page) {
      case 1:
    ?>
        // show code for page 1 here 
        <input type='hidden' name='page' value='1' />
    <?php
        break;
      case 2:
    ?>
        // show code for page 2 here 
        <input type='hidden' name='page' value='2' />
    <?php
        break;
    // repeat as needed
    }
    ?>
    and in the OnSubmit Before Box
    <?php
    $page = JRequest::getInt('page', '0', 'post');
    switch ($page) {
      case 0:
        echo "We've got a problem - this should never happen!!";
        break;
      case 1: 
        $post =& JRequest::get('post');
        // process the first page
        ...
        // redisplay the form
        showform($post);
        // supress the email and db preocessing
        $error_found = true;
        break;
    // repeat as needed
      case n:
        // process last page and let continue to emails and db 
        break;
    }
    ?>

    Bob
    Sweder 04 Feb, 2009
    Hello,

    I tried the solution but the second page is empty. Is the provided solution still valid for the latest release of ChronoForms?

    Kind regards,

    Sweder
    Max_admin 04 Feb, 2009
    Hi Sweder,

    Can you show us your form code now ? just to make sure you applied Bob's code correctly.

    Regards,
    Max
    Max, ChronoForms developer
    ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
    ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
    Sweder 04 Feb, 2009
    Hello,

    I did not apply the code correctly. I left out the hidden field. Now my test works.

    Kind regards,

    Sweder

    P.S. tried to remove my post but you already replied.
    Sweder 04 Feb, 2009
    I have another (related) question.

    I have a form with multiple buttons. How to find out which one was pressed?

    <?php echo "Step $page of 3" ?>
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >alpha/num only</LABEL><INPUT class="cf_inputbox validate-alphanum" id=text_4  maxLength=150 size=30 name=text_4 ></DIV>
    <DIV class=clear > </DIV></DIV>
    <DIV class=form_item   >
    <DIV class="form_element cf_button" ><INPUT  type=submit value=Next id=button_1></DIV>
    <DIV class=clear > </DIV></DIV>
    <DIV class=form_item   >
    <DIV class="form_element cf_button" ><INPUT  type=submit value="Add another item" id=button_2 ></DIV>
    <DIV class=clear > </DIV></DIV-->
    <input type='hidden' name='page' value='2' />
    

    Kind regards,

    Sweder
    GreyHead 04 Feb, 2009
    Hi Sweder,

    Check the value of the 'submit' variable in the OnSubmit code.
    <?php
    $submit = JRequest::getVar('submit', '', 'post');
    if ( $submit == 'Next' ) {
      // do this
    } else {
      // do that 
    }
    ?>
    cobayecrau 09 Feb, 2009
    Hello,
    I'm trying to apply the soluces given by Bob

    when I have a look at the table I get this
    cf_id uid recordtime ipaddress cf_user_id text_5 text_8 text_9 text_10 text_11 select_3 select_4 select_5 select_6 text_12
    6 INzUwMGJiZTdlNzkx 2009-02-09 - 15:02:52 127.0.0.1 0 X 05:05 06:06 10 0 1 69 68 commentaire 11
    7 IZjViMjU0YTRhMjY4 2009-02-09 - 15:03:34 127.0.0.1 0 Z 14:14 15:15 15 1 67 commentaire 12

    During my previous test with only one form, select_6 which is an area was correctly filled (65,66,67 ie), now there is nothing but the debug mode shows there is something in the area

    What I wish is to fill select_3 and select_4 on the form1, and to prepopulate in readonly text_5 with the number of page (here text_5 = 1) of course I choose values for the other fields select5 select_6 text_xx
    I wish form n+1 prepopulate with the select_3, select_4 values previouslty chhosen in form1, text_5 becomes 2 and I fill the other fields.
    I want one record per form with all the data of the form.
    And last question how to break the loop, may be with an other submit button ?

    Code form
    <?php
    $page = JRequest::getInt('page', '0', 'post');
    $page++; // to get the current page
    switch ($page) {
      case 1:
    ?>
        // show code for page 1 here 
        <input type='hidden' name='page' value='1' />
    <DIV class=form_item   >
    <DIV class="form_element cf_dropdown" ><LABEL class=cf_label >sélectionner un événement</LABEL>
        <?php
        $db =& JFactory::getDBO();
        $query = "
          SELECT id, title
            FROM #__seminar WHERE NOW() > end ";
        $db->setQuery($query);
        $rows = $db->loadObjectList();
        ?>
        
        <SELECT class="cf_inputbox validate-selection" id=select_3 size=3 name=select_3 >
        <?php
        foreach ( $rows as $row )
     {
         echo "<option value='".$row->id."' >".$row->title."</option>";
    }
    ?>
        </select>
       
    </DIV>
    <DIV class=clear > </DIV></DIV>
    
    
    <DIV class=form_item   >
    <DIV class="form_element cf_dropdown" >
    <LABEL class=cf_label >sélectionner un directeur de plongée</LABEL>
    <?php
        $db =& JFactory::getDBO();
    $query = "
      SELECT * 
        FROM ".$db->nameQuote('#__users')." a
        INNER JOIN ".$db->nameQuote('#__comprofiler')." b
          ON ( a.id = b.id )
        WHERE ( b.cb_niveauencadrement != '' )";
    
        $db->setQuery($query);
        $rows = $db->loadObjectList();
    ?>
        
        <SELECT class="cf_inputbox validate-selection" id=select_4 size=3 name=select_4 >
        <?php
        foreach ($rows as $row)
      {
         echo "<option value='".$row->id."' >".$row->name."</option>";
    }
       ?>
        </select>
    </DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" >
    <LABEL class=cf_label >Palanquée n° :</LABEL>
    <INPUT class="cf_inputbox required validate-digits" id=text_5  maxLength=2 size=2 name=text_5 >
    <A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Palanquée n° : :: Numéro d'ordre de la palanquée</DIV>
    </DIV>
    <DIV class=clear > </DIV></DIV>
    
    
    <DIV class=form_item   >
    <DIV class="form_element cf_dropdown" >
    <LABEL class=cf_label >Sélectionner le guide :</LABEL>
    <?php
    $db =& JFactory::getDBO();
    $query = "
      SELECT * 
        FROM ".$db->nameQuote('#__users')." a
        INNER JOIN ".$db->nameQuote('#__comprofiler')." b
          ON ( a.id = b.id )
        WHERE ( b.cb_niveauencadrement != '' )
          OR ( b.cb_niveauplongeur = 'Niveau 4' )";
    $db->setQuery($query);
    $rows = $db->loadObjectList();
    ?>
        
        <SELECT class="cf_inputbox validate-selection" id=select_5 size=3 name=select_5 >
        <?php
        foreach ($rows as $row)
    { 
    echo "<option value='".$row->id."' >".$row->name."</option>"; 
    }
         ?>
        </select>
    <A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Sélectionner le guide : :: Guide ou moniteur</DIV>
    </DIV>
    <DIV class=clear > </DIV></DIV>
    
    <?php
    $db =& JFactory::getDBO();
    $query = "
      SELECT id, name
        FROM #__users ";
    $db->setQuery($query);
    $rows = $db->loadObjectList();
    ?>
    <div class='form_item' >
      <div class="form_element cf_dropdown" >
        <label class='cf_label' >Sélectionner les plongeurs</label>
        <select class="cf_inputbox validate-selection" id='select_6' multiple='multiple' size='4' name=select_6[]  >
    <?php
        foreach ( $rows as $row )
     {
         echo "<option value='".$row->id."' >".$row->name."</option>";}
    ?>
        </select>
        <a class='tooltiplink' onclick="return false;"  >
          <img class='tooltipimg'  height='16' src="components/com_chronocontact/css/images/tooltip.png" width='16' border='0' >
        </a>
        <div class='tooltipdiv' >Sélectionner les plongeurs :: Sélectionner au plus 4 plongeurs utilisez les touches <CTRL><C></div>
      </div>
      <div class='clear' > </div>
    </div>
    
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Heure de départ</LABEL><INPUT class="cf_inputbox required validate-date" id=text_8  maxLength=10 size=10 name=text_8 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Heure de sortie</LABEL><INPUT class="cf_inputbox validate-date" id=text_9  maxLength=10 size=10 name=text_9 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Palier à 3 m :</LABEL><INPUT class="cf_inputbox validate-number" id=text_10  maxLength=150 size=30 name=text_10 ><A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Palier à 3 m : :: saisir la durée du palier en mn</DIV></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Palier à 6 m :</LABEL><INPUT class="cf_inputbox validate-number" id=text_11  maxLength=150 size=30 name=text_11 ><A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Palier à 6 m : :: Saisir la durée du palier  à 6 m</DIV></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textarea" ><LABEL class=cf_label >Commentaires :</LABEL><TEXTAREA class=cf_inputbox id=text_12 name=text_12 rows=3 cols=30 ></TEXTAREA><A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Commentaires : :: Saisir ici vos commentaires, objet de la plongée, faits marquants</DIV></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_button" ><INPUT  type=submit value=Submit1 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_button" ><INPUT  type=submit value=Submit2 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    
    <?php
        break;
    
      case 2:
    ?>
        // show code for page 2 here 
        <input type='hidden' name='page' value='2' />
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" >
    <LABEL class=cf_label >Palanquée n° :</LABEL>
    <INPUT class="cf_inputbox required validate-digits" id=text_5  maxLength=2 size=2 name=text_5 >
    <A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Palanquée n° : :: Numéro d'ordre de la palanquée</DIV>
    </DIV>
    <DIV class=clear > </DIV></DIV>
    
    
    <DIV class=form_item   >
    <DIV class="form_element cf_dropdown" >
    <LABEL class=cf_label >Sélectionner le guide :</LABEL>
    <?php
    $db =& JFactory::getDBO();
    $query = "
      SELECT * 
        FROM ".$db->nameQuote('#__users')." a
        INNER JOIN ".$db->nameQuote('#__comprofiler')." b
          ON ( a.id = b.id )
        WHERE ( b.cb_niveauencadrement != '' )
          OR ( b.cb_niveauplongeur = 'Niveau 4' )";
    $db->setQuery($query);
    $rows = $db->loadObjectList();
    ?>
        
        <SELECT class="cf_inputbox validate-selection" id=select_5 size=3 name=select_5 >
        <?php
        foreach ($rows as $row)
    { 
    echo "<option value='".$row->id."' >".$row->name."</option>"; 
    }
         ?>
        </select>
    <A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Sélectionner le guide : :: Guide ou moniteur</DIV>
    </DIV>
    <DIV class=clear > </DIV></DIV>
    
    <?php
    $db =& JFactory::getDBO();
    $query = "
      SELECT id, name
        FROM #__users ";
    $db->setQuery($query);
    $rows = $db->loadObjectList();
    ?>
    <div class='form_item' >
      <div class="form_element cf_dropdown" >
        <label class='cf_label' >Sélectionner les plongeurs</label>
        <select class="cf_inputbox validate-selection" id='select_6' multiple='multiple' size='4' name=select_6[]  >
    <?php
        foreach ( $rows as $row )
     {
         echo "<option value='".$row->id."' >".$row->name."</option>";}
    ?>
        </select>
        <a class='tooltiplink' onclick="return false;"  >
          <img class='tooltipimg'  height='16' src="components/com_chronocontact/css/images/tooltip.png" width='16' border='0' >
        </a>
        <div class='tooltipdiv' >Sélectionner les plongeurs :: Sélectionner au plus 4 plongeurs utilisez les touches <CTRL><C></div>
      </div>
      <div class='clear' > </div>
    </div>
    
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Heure de départ</LABEL><INPUT class="cf_inputbox required validate-date" id=text_8  maxLength=10 size=10 name=text_8 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Heure de sortie</LABEL><INPUT class="cf_inputbox validate-date" id=text_9  maxLength=10 size=10 name=text_9 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Palier à 3 m :</LABEL><INPUT class="cf_inputbox validate-number" id=text_10  maxLength=150 size=30 name=text_10 ><A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Palier à 3 m : :: saisir la durée du palier en mn</DIV></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textbox" ><LABEL class=cf_label >Palier à 6 m :</LABEL><INPUT class="cf_inputbox validate-number" id=text_11  maxLength=150 size=30 name=text_11 ><A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Palier à 6 m : :: Saisir la durée du palier  à 6 m</DIV></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_textarea" ><LABEL class=cf_label >Commentaires :</LABEL><TEXTAREA class=cf_inputbox id=text_12 name=text_12 rows=3 cols=30 ></TEXTAREA><A class=tooltiplink onclick="return false;"  ><IMG class=tooltipimg  height=16 src="components/com_chronocontact/css/images/tooltip.png" width=16 border=0 ></A>
    <DIV class=tooltipdiv  >Commentaires : :: Saisir ici vos commentaires, objet de la plongée, faits marquants</DIV></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_button" ><INPUT  type=submit value=Submit1 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <DIV class=form_item   >
    <DIV class="form_element cf_button" ><INPUT  type=submit value=Submit2 ></DIV>
    <DIV class=clear > </DIV></DIV>
    
    <?php
        break;
    // repeat as needed
     }
    ?>
    
    
    
    


    On submit code before sending
    <?php
    JRequest::setVar('select_6', implode(", ", JRequest::getVar('select_6')));
    ?>
    <?php
    $page = JRequest::getInt('page', '0', 'post');
    switch ($page) {
      case 0:
        echo "We've got a problem - this should never happen!!";
        break;
      case 1: 
        $post =& JRequest::get('post');
        // process the first page
        ...
        // redisplay the form
        showform($post);
        // supress the email and db preocessing
        $error_found = true;
        break;
    // repeat as needed
      case n:
        // process last page and let continue to emails and db 
        break;
    }
    ?>
    cobayecrau 11 Feb, 2009
    No idea ?
    just a little up
    GreyHead 11 Feb, 2009
    Hi Patrice,

    OK - I'll take a look later today. To save me some time. . . [sendfb][/sendfb]
    Bob
    cobayecrau 11 Feb, 2009
    I understand, I'm not on the hurry.
    It's for my hobby not my real work
    find attached a backup of my test with multiple forms.
    I don't know what is the weather today in Brittany but in the south it's perfect (little bit windy)
    cobayecrau 23 Feb, 2009
    Hello,
    Just a little help. I would appreciate a little help
    GreyHead 23 Feb, 2009
    Hi Patrice,

    Thanks for the reminder. I spent some more time looking at this today.

    My problem is that I don't understand what you are trying to do with the form.

    It looks as though Page 1 sets up the broad details of a dive party, that's OK.

    Do you then want a page for each member of the party?? I don't understand why Page 2 repeats most of the questions from page 1??

    You have the results from Page 1 available when you create page 2 provided that you pass them on. You can set the values of the fields using these . . . but there is no code here to do this.

    Bob

    PS Is this an example of the kind of form that you - want? The 'Team Size' selector near the beginning sets the size of the team - then there are several 'Team member' pages in an accordion further down
    cobayecrau 23 Feb, 2009
    OK, I try to explain more in details what I want to do.
    I want to fill the logbook of the dive
    There is a "big" group of divers for the example we can assume there are 8 divers.
    Within this big group :
    One is the course director (he can dives or not) (we chose him in a dropdown list depending of his diving level) and he has the responsabily of the whole.
    for the example we manage two subgroups (4 divers and 4 divers)
    each subgroup has a guide ( we choose the guide within a dropdown list dependig of the diving level required to be a guide) and three divers. Each sub group is identifed by a number |1, 2,,n] (could be the id of the table record any way its is n=n+1).
    The characteristics of a subgroup (une palanquée in french) are the guide (id), the id of the divers (never more than 4) depth, departure hour, exit hour, depth and time of steps,etc....
    They share the same dive.
    The common characteristic for all the subgroups are the place, the date, and the course director.
    I wish to obtain a record for each subgroup(an their charactristics) + the common characteristics. So I can retrieve the data with a simple request (select ..... where "course director" = xxxxxx)((select ..... where "place" = xxxxxx)

    To do that
    I wish to fill the first form with the common data and the data for the first subgroup, then for the second form I wish to prepopulate with read only the common data and allow to fil the data for the second subgroup, the same if there were a third subgroup etc....
    Of course on each form I have two choices : validate and exit or validate and continue
    Max_admin 04 Mar, 2009
    Hi Patrice,

    Reading the details of the project is not something easy when there are alot of posts everyday, but even after reading it I can see that you still need to follow the basic multiple form method used and all other details are very dependent to your form logic, I'm planning to make multiple pages forms easier soon!

    Regards
    Max
    Max, ChronoForms developer
    ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
    ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
    gatsu 11 Jul, 2009
    Hey OP here sorry for such a long follow up. We decided on a diffrent approach at the time but now we are back to this we tried out the code inserting the diffrent pages between the breaks were noted. When we load the form the first page of data shows up perfect. When we hit the submit button there it does not take it to the next page it simply goes to the page it is supposed to go when the form is completed. It didn't even execute the other forms within the code. Any suggestions?
    GreyHead 11 Jul, 2009
    Hi Gatsu,

    Since this thread was last used Max has introduced a Multi-Page plugin that make this much easier. I posted a little walk-through in the Plugins Forum here a few weeks ago.

    Bob
    This topic is locked and no more replies can be posted.