How to best show form data for review before submit? (JS)

Good evening,

I am using a Form-Wizard (Fuel Ux - http://formvalidation.io/examples/fuel-ux-wizard/) to capture the data from my users in a registration form.

Now on the final page I want to display some of the data as in a quick summary for the user to review. Now I am wondering what is the easiest and cleanest way to do that in your experience? Simply create HTML "dirty" via JavaScript? I use JQuery and Bootstrap with Laravel 5.2.

(Of course I googled this before posting here but I simply cannot find a proper answer since I dont want to Ajax anything, just display form data of a form which has not yet been submitted)

Thanks Andreas

andreasb

10 years ago

Level 3

Well, I ended up getting and setting the field text/values via jquery if anyone is interested in it:

$("#company_name").change(function setCompanyName() {
        var $field = $('#review_company_name');
        $field.text($("#company_name").val());
    });

and to make sure the data is set when someone presses F5....

  $(function(){

        $('#review_company_name').text($("#company_name").val());
...

Works like a charm

qodehub

9 years ago

Level 7

am also have the same issue, please let me know you get any solution it

himoath

7 years ago

Level 1

You can add data-bind attribute for the inputs, and then save their values to array and keep watching them. Finally, render them on change, or page load.

This code will save to array and watch the inputs that have data-bind, and will trigger updateDisplay event on any input change:

// Declare a global object to store view data.
var viewData = {};

(function () {

    // Update the viewData object with the current field keys and values.
    function updateViewData(key, value) {
        viewData[key] = value;
    }

    // Register all bindable elements
    function detectBindableElements() {
                var bindableEls;

                bindableEls = $('[data-bind]');

                // Add event handlers to update viewData and trigger callback event.
                bindableEls.on('change', function () {
                    var $this;

                    $this = $(this);

                    updateViewData($this.data('bind'), $this.val());

                    $(document).trigger('updateDisplay');
                });

                // Add a reference to each bindable element in viewData.
        bindableEls.each(function () {
            updateViewData($(this), $(this).val());
        });

    }

    // Trigger this event to manually update the list of bindable elements, useful when dynamically loading form fields.
    $(document).on('updateBindableElements', detectBindableElements);

    detectBindableElements();
});

Now we want to update the review fields on updateDisplay event, so we add data-update to review fields with the same value added in data-bind for the input. This code will go through all data-update and set their values:

function updateDisplay() {
    var updateEls;
    updateEls = $('[data-update]');

    updateEls.each(function () {
        $(this).text(viewData[$(this).data('update')]);
    });
}

// Run updateDisplay on the callback.
$(document).on('updateDisplay', updateDisplay);

Example:

// In your form
<input name="email" data-bind="email">
...
...
// In review fields
<div data-update="email"></div>

Please or to participate in this conversation.