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> </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> </p>
<p><strong>Bestätigung Datenschutz:</strong> <span id="checkGroupDatenschutzPreview">.</span></p>
<p> </p>
<p><strong>Bestätigung Bedingungen Flugbuchung:</strong> <span id="checkGroupFlugbuchungPreview">.</span></p>
<p> </p>
<h4>Daten 1. Reiseteilnehmer</h4>
<p> </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> </p>
<h4>Daten 2. Reiseteilnehmer</h4>
<p> </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> </p>
<h4>Daten 3. Reiseteilnehmer</h4>
<p> </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> </p>
<h4>Daten 4. Reiseteilnehmer</h4>
<p> </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> </p>
<p><strong>Bestätigung Reiseversicherungen:</strong> <span id="checkGroupReiseversicherungenPreview">.</span></p>
<p> </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