RSForm Preview - can be tested with example form "RSForm! Pro Multipage example"

rsform-preview.js

// Store this script in templates/<your-template>/js/rsform-preview.js

/**
 * Create the Review Field based on array with questions
 *
 * @param formIdValue
 * @param previewPageNumber
 * @param totalPages
 * @param validateOnChangingPage
 */
function previewBeforeSubmit(formIdValue, previewPageNumber, totalPages, validateOnChangingPage) {
  /**
   * Object with items to be filled on review
   * [key] should be present as a `<dl id=[key]></dl>` in form field with name = formReview
   * [value] is an array of items that should return in the review list
   * @type {{reviewFormTrainer: string[], reviewFormPractical: string[]}}
   */
  var blocks = {
    'previewFormHeader': [
      'FullName',
      'Email'
    ],
    'previewFormCompany':
      [
        'CompanySize',
        'Position'
      ]
    ,
    'previewFormContact':
      [
        'ContactBy',
        //'ContactWhen'
      ]
  };

  if (previewPageNumber === 3) {
    for (const key in blocks) {
      if (blocks.hasOwnProperty(key)) {
        const questions = blocks[key];

        // Clean preview block
        document.getElementById(key).innerHTML = '';

        // Render Questions
        renderQuestions(key, questions);

        // Cleanup Block if empty
        cleanupEmptyBlock(key);
      }
    }
  }
  rsfp_changePage(formIdValue, previewPageNumber, totalPages, validateOnChangingPage);
}

/**
 * Check if given id is shown or not
 *
 * @param id
 * @returns {boolean}
 */
function isShown(id) {
  var sanitizedId = id.replaceAll('_', '-')
    .replaceAll('--', '-')
    .toLowerCase();
  var elem = document.querySelector('.rsform-block-' + sanitizedId);

  if (!elem) {
    return false;
  }

  return (elem.style.display !== 'none');
}

/**
 * Return the field type of given id
 *
 * @param id
 * @returns {string|boolean}
 */
function getFieldType(id) {
  var element = document.getElementById(id);
  if (!element) {
    element = document.getElementsByName(`form[${id}][]`);
    if (element.length > 0) {
      return 'checkbox';
    }

    element = document.getElementsByName(`form[${id}]`);
    if (element.length > 0) {
      return 'radio';
    }

    return false;
  }

  var tagName = element.tagName.toLowerCase();
  if (tagName !== 'input') {
    return tagName;
  }
  return element.getAttribute('type')
    .toLowerCase();
}

/**
 * Return the field label of given id
 *
 * @param id
 * @param type
 * @returns {string}
 */
function getFieldLabel(id, type = '') {
  let element = '';

// type = radio or checkbox
  if (type === 'radio' || type === 'checkbox') {
    let elementName = `form[${id}]`;

    if (type === 'checkbox') {
      elementName += '[]';
    }

    element = document.getElementsByName(elementName)[0];
  }

// type = textarea, text
  const inputTypes = ['textarea', 'text', 'file', 'email', 'number', 'select'];
  if (inputTypes.indexOf(type) >= 0) {
    element = document.getElementById(id);
  }

  if (!element) {
    return '';
  }

  return element.closest('.rsform-block').firstElementChild.textContent;
}

/**
 * Return the field value of given id
 *
 * @param id
 * @param type
 * @returns {*[]|number}
 */
function getFieldValue(id, type = '') {
  // type = radio or checkbox
  if (type === 'radio' || type === 'checkbox') {
    let i;
    let elementName = `form[${id}]`;
    let outputChoice = [];
    if (type === 'checkbox') {
      elementName += '[]';
    }

    for (i = 0; i < document.getElementsByName(elementName).length; i++) {
      if (document.getElementById(id + i).checked) {
        outputChoice.push(document.getElementById(id + i).value);
      }
    }

    return outputChoice;
  }
  
  // type = select
  if (type === 'select') {
    var outputSelect = [];
    var select = document.getElementById(id);

    outputSelect.push = select.options[select.selectedIndex].value;

    return outputSelect;
  }
  
  // type = file
  if (type === 'file') {
    var outputFile = [];
    var files = document.getElementById(id).files;

    for (var k = 0; k < files.length; k++) {
      outputFile.push(files[k].name);
    }

    return outputFile;
  }

  // type = textarea, text, email, number
  var inputTypes = ['textarea', 'text', 'email', 'number'];
  if (inputTypes.indexOf(type) >= 0) {
    var output = [];
    output.push(document.getElementById(id).value);

    return output;
  }

  return [];
}

/**
 *
 * @param id
 * @param questions
 */
function renderQuestions(id, questions) {
  questions.forEach(function (question) {
    if (isShown(question)) {
      addRow(
        getFieldLabel(question, getFieldType(question)),
        getFieldValue(question, getFieldType(question)),
        id
      );
    }
  });
}

/**
 * Hide Title and Block when the latter is empty
 *
 * @param id
 */
function cleanupEmptyBlock(id) {
  var element = document.getElementById(id);
  if (!element) {
    return;
  }

  if (element.innerHTML !== '') {
    return;
  }

  element.previousElementSibling.style.display = 'none';
  element.style.display = 'none';
}

/**
 * Add new row to definition list
 *
 * @param fieldLabel  string
 * @param fieldValues array
 * @param elementId   string
 */
function addRow(fieldLabel, fieldValues, elementId = 'reviewFormTrainer') {
  if (Array.isArray(fieldValues) && !fieldValues.length) {
    return;
  }

  var DL = document.getElementById(elementId);

  // Cleanup field Label
  fieldLabel = fieldLabel.replace('<strong class="formRequired">*</strong>', '');
  var elementDT = document.createElement('dt');
  elementDT.innerHTML = fieldLabel;
  DL.appendChild(elementDT);

  fieldValues.forEach(function (fieldValue) {
    var elementDD = document.createElement('dd');
    elementDD.innerHTML = fieldValue;
    DL.appendChild(elementDD);
  });
}


/**
 * 
 * - edit Joomla Administrator > Components > RSForm! Pro > RSForm! Pro Multipage example
 * 
 * # Adjust Fields
 * - add new field 
 *   - type = `Pagebreak`
 *   - name = `Page3`
 * - add New Row after added PageBreak
 * - move fields _Submit_ and _Footer_ to newly created row
 * - add new field 
 *   - type = `Free Text`
 *   - name = `previewForm`
 *   - HTML = 
 *   ```
 * <div id="previewForm">
 *   <h3>Header</h3>
 *   <dl id="previewFormHeader">
 *   </dl>
 *   <h3>Company</h3>
 *   <dl id="previewFormCopany">
 *   </dl>
 *   <h3>Contact</h3>
 *   <dl id="previewFormContact">
 *   </dl>
 * </div>
 *   ```
 *   - move new field before `Submit`
 *   
 * # Call to script  
 * - Form Properties > Scripts > PHP Scripts > Script called on form display
 * - ```
 * use Joomla\CMS\HTML\HTMLHelper;
 * HTMLHelper::_('script', 'rsform-preview.js', ['version' => 'auto', 'relative' => true]);
 * ```
 * 
 * # Trigger the script
 * - Form Properties > Scripts > PHP Scripts > Script called on form display
 * - ```
 * $formLayout = str_replace('rsfp_changePage(','previewBeforeSubmit(',$formLayout);
 * ```
 * 
 * note: this example does not cover the Date field yet
 **/

Hi, do you know when it will be ready for date ???
I have a 3 calendar types fields and it would be perfect !

thanks in advance

did u use on Joomla 4?

There is no need for my current projects to make a Date field yet. Feel free to make it your own.