Multiple Pages to 1 form

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?

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

Multi-page is what we would be after. What are the necessary steps to do this?

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

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

Hi Sweder,

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

Regards,
Max

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.

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

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 
}
?>

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;
}
?>

No idea ?
just a little up

Hi Patrice,

OK - I'll take a look later today. To save me some time. . . [sendfb][/sendfb]
Bob

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)

Hello,
Just a little help. I would appreciate a little help

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

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

up😛

The sound of silence

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

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?

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