• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Multipage form with review before submission

Multipage form with review before submission 4 years 9 months ago #39203

  • s0801634
  • s0801634's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 2
Hello everybody,

as I´m not a coder but familiar with Joomla and very some coding I´m now at a point I don´t know how to go ahead...

I´ve built a multipage form which can be found here: https://www.tripguru.de/buchung

As it is about booking a travel package I would like to let customers review the input they`ve made before submitting the form. So, what I have done so far?

1.) I have created that form, link above (only on 1st page all fields are required!).

2.) I have added a preview field which has the following code within the text area:
<div class="span6">
  <h3>Zusammenfassung der eingegebenen Daten</h3>
 <p>&nbsp;</p>
  <p><strong>Angebotsnummer:</strong> <span id="angebotsnummerPreview">.</span></p>
  <p><strong>Name des Hauptkontaktes:</strong> <span id="name_hkPreview">.</span></p>
  <p><strong>Straße & Hausnummer:</strong> <span id="anschrift1Preview">.</span></p>
  <p><strong>PLZ & Ort:</strong> <span id="anschrift2Preview">.</span></p>
  <p><strong>e-Mail:</strong> <span id="e-mailPreview">.</span></p>
  <p><strong>Bestätigung Reiseanmeldung:</strong> <span id="checkGroupReiseanmeldungPreview">.</span></p>
  <p><strong>e-Mail:</strong> <span id="e-mailPreview">.</span></p>
 <p>&nbsp;</p>
  <p><strong>Bestätigung Datenschutz:</strong> <span id="checkGroupDatenschutzPreview">.</span></p>
 <p>&nbsp;</p>
  <p><strong>Bestätigung Bedingungen Flugbuchung:</strong> <span id="checkGroupFlugbuchungPreview">.</span></p>
 <p>&nbsp;</p>
  <h4>Daten 1. Reiseteilnehmer</h4>
 <p>&nbsp;</p>
  <p><strong>Anrede:</strong> <span id="checkGroupAnredeTN1Preview">.</span></p>
  <p><strong>Vorname:</strong> <span id="vornameTN1Preview">.</span></p>
  <p><strong>Nachname:</strong> <span id="nachnameTN1Preview">.</span></p>
  <p><strong>Geburtstag:</strong> <span id="geburtstagTN1Preview">.</span></p>
  <p><strong>Reisepassnummer:</strong> <span id="ReisepassTN1Preview">.</span></p>
  <p><strong>Ausstellungs- & Ablaufdatum:</strong> <span id="reisepassvalidTN1Preview">.</span></p>
<p>&nbsp;</p>
  <h4>Daten 2. Reiseteilnehmer</h4>
 <p>&nbsp;</p>
  <p><strong>Anrede:</strong> <span id="checkGroupAnredeTN2Preview">.</span></p>
  <p><strong>Vorname:</strong> <span id="vornameTN2Preview">.</span></p>
  <p><strong>Nachname:</strong> <span id="nachnameTN2Preview">.</span></p>
  <p><strong>Geburtstag:</strong> <span id="geburtstagTN2Preview">.</span></p>
  <p><strong>Reisepassnummer:</strong> <span id="ReisepassTN2Preview">.</span></p>
  <p><strong>Ausstellungs- & Ablaufdatum:</strong> <span id="reisepassvalidTN2Preview">.</span></p>
<p>&nbsp;</p>
  <h4>Daten 3. Reiseteilnehmer</h4>
 <p>&nbsp;</p>
  <p><strong>Anrede:</strong> <span id="checkGroupAnredeTN3Preview">.</span></p>
  <p><strong>Vorname:</strong> <span id="vornameTN3Preview">.</span></p>
  <p><strong>Nachname:</strong> <span id="nachnameTN3Preview">.</span></p>
  <p><strong>Geburtstag:</strong> <span id="geburtstagTN3Preview">.</span></p>
  <p><strong>Reisepassnummer:</strong> <span id="ReisepassTN3Preview">.</span></p>
  <p><strong>Ausstellungs- & Ablaufdatum:</strong> <span id="reisepassvalidTN3Preview">.</span></p>
<p>&nbsp;</p>
  <h4>Daten 4. Reiseteilnehmer</h4>
 <p>&nbsp;</p>
  <p><strong>Anrede:</strong> <span id="checkGroupAnredeTN4Preview">.</span></p>
  <p><strong>Vorname:</strong> <span id="vornameTN4Preview">.</span></p>
  <p><strong>Nachname:</strong> <span id="nachnameTN4Preview">.</span></p>
  <p><strong>Geburtstag:</strong> <span id="geburtstagTN4Preview">.</span></p>
  <p><strong>Reisepassnummer:</strong> <span id="ReisepassTN4Preview">.</span></p>
  <p><strong>Ausstellungs- & Ablaufdatum:</strong> <span id="reisepassvalidTN4Preview">.</span></p>
 <p>&nbsp;</p>
<p><strong>Bestätigung Reiseversicherungen:</strong> <span id="checkGroupReiseversicherungenPreview">.</span></p>
<p>&nbsp;</p>
</div>

3.) Within the Java script area a pasted my code like this:
<script type="text/javascript">
function previewBeforeSubmit(9, 5, 6, true)
{
  if (previewPageNumber == 1 && totalPages == 1)
  {
  document.getElementById('angebotsnummerPreview').innerHTML = document.getElementById('Angebotsnummer').value;
  document.getElementById('name_hkPreview').innerHTML = document.getElementById('Name_HK').value;
  document.getElementById('anschrift1Preview').innerHTML = document.getElementById('Anschrift').value;
  document.getElementById('anschrift2Preview').innerHTML = document.getElementById('Anschrift2').value;
  document.getElementById('e-mailPreview').innerHTML = document.getElementById('e-mail').value;
 document.getElementById('checkGroupReiseanmeldungPreview').innerHTML = document.getElementById('Bestaetigungsbox1').value;
 document.getElementById('checkGroupDatenschutzPreview').innerHTML = document.getElementById('Datenschutz').value;
 document.getElementById('checkGroupFlugbuchungPreview').innerHTML = document.getElementById('Fluginfobox').value;
 document.getElementById('checkGroupAnredeTN1Preview').innerHTML = document.getElementById('AnredeTN1').value;
  document.getElementById('vornameTN1Preview').innerHTML = document.getElementById('TN1Vorname').value;
  document.getElementById('nachnameTN1Preview').innerHTML = document.getElementById('TN1Nachname').value;
  document.getElementById('geburtstagTN1Preview').innerHTML = document.getElementById('TN1Geburtstag').value;
  document.getElementById('ReisepassTN1Preview').innerHTML = document.getElementById('TN1Reisepass').value;
  document.getElementById('reisepassvalidTN1Preview').innerHTML = document.getElementById('TN1Reisepassvalid').value;
document.getElementById('checkGroupAnredeTN2Preview').innerHTML = document.getElementById('AnredeTN2').value;
  document.getElementById('vornameTN2Preview').innerHTML = document.getElementById('TN2Vorname').value;
  document.getElementById('nachnameTN2Preview').innerHTML = document.getElementById('TN2Nachname').value;
  document.getElementById('geburtstagTN2Preview').innerHTML = document.getElementById('TN2Geburtstag').value;
  document.getElementById('ReisepassTN2Preview').innerHTML = document.getElementById('TN2Reisepass').value;
  document.getElementById('reisepassvalidTN2Preview').innerHTML = document.getElementById('TN2Reisepassvalid').value;
document.getElementById('checkGroupAnredeTN3Preview').innerHTML = document.getElementById('AnredeTN3').value;
  document.getElementById('vornameTN3Preview').innerHTML = document.getElementById('TN3Vorname').value;
  document.getElementById('nachnameTN3Preview').innerHTML = document.getElementById('TN3Nachname').value;
  document.getElementById('geburtstagTN3Preview').innerHTML = document.getElementById('TN3Geburtstag').value;
  document.getElementById('ReisepassTN3Preview').innerHTML = document.getElementById('TN3Reisepass').value;
  document.getElementById('reisepassvalidTN3Preview').innerHTML = document.getElementById('TN3Reisepassvalid').value;
document.getElementById('checkGroupAnredeTN4Preview').innerHTML = document.getElementById('AnredeTN4').value;
  document.getElementById('vornameTN4Preview').innerHTML = document.getElementById('TN4Vorname').value;
  document.getElementById('nachnameTN4Preview').innerHTML = document.getElementById('TN4Nachname').value;
  document.getElementById('geburtstagTN4Preview').innerHTML = document.getElementById('TN4Geburtstag').value;
  document.getElementById('ReisepassTN4Preview').innerHTML = document.getElementById('TN4Reisepass').value;
  document.getElementById('reisepassvalidTN4Preview').innerHTML = document.getElementById('TN4Reisepassvalid').value;
 document.getElementById('checkGroupReiseversicherungenPreview').innerHTML = document.getElementById('Versicherungsbox').value;
 
 
  var i;
  for(i=0;i<document.getElementsByName('form[RadioGroup]').length;i++)
  if (document.getElementById('RadioGroup'+i).checked)
  document.getElementById('radioGroupPreview').innerHTML = document.getElementById('RadioGroup'+i).value;
 
  document.getElementById('checkGroupPreview').innerHTML = '';
  var j;
  for(j=0;j<document.getElementsByName('form[CheckGroup][]').length;j++)
  if (document.getElementById('CheckGroup'+j).checked)
  document.getElementById('checkGroupPreview').innerHTML += " " + document.getElementById('CheckGroup'+j).value;
  }
  rsfp_changePage(9, 5, 6, true);
}
</script>

While within these two lines "rsfp_changePage(9, 5, 6, true);" the "9" is the form-ID, the "5" is number of page where preview should be shown and "6" is the total number of pages.



So far, so good - if you click through the form you will come to the preview page, but a) there is now "Preview" Button - there is just the regular button for "n ext page" and b) all fields are empty :(

Okay, I missed the trigger:
$formLayout = str_replace('rsfp_changePage(','previewBeforeSubmit(',$formLayout);

But if I place the trigger within the "Scripts called on form display" area in php-scripts than the whole form (all pages) are shown as one side with the preview is still empty :(


My questions:
  • Does anyone have an idea how to solve the problem?
  • Could someone check if I got the right syntax for the check-boxes and radio-buttons within my Java script
  • Is more information needed?

Any helpful response will be much appreciated!!!

Thank you so much,
Michael
The administrator has disabled public write access.

Multipage form with review before submission 4 years 9 months ago #39213

  • andreic
  • andreic's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 713
  • Thank you received: 59
Have you managed to resolve this? I have taken a look at your form and noticed that except the `Angebotsnummer` field the rest of your Javascript is commented out. For this field the value is properly displayed in the last page, the preview one.
Please note: my help is not official customer support. To receive your support, submit a ticket by clicking here
Regards,
RSJoomla! Development Team
The administrator has disabled public write access.
The following user(s) said Thank You: s0801634

Multipage form with review before submission 4 years 9 months ago #39216

  • s0801634
  • s0801634's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 2
Yes, with help from a professional coder I´ve solved the problem. There have been two mistakes within the name of two field-IDs/names and the settings in line
function previewBeforeSubmit(formIdValue, previewPageNumber, totalPages, validateOnChangingPage)
{
  if (previewPageNumber == 1 && totalPages == 1)

You should make your support page more detailed (where to change data), so non-coders will better know where to make individual changes ;-)

Thank you,
Michael
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!