Crocoblock / jetformbuilder

80 stars 16 forks source link

Show the information entered in a repeater field in the same form (jetformbuilder) #382

Open Rene-Lorenzo opened 10 months ago

Rene-Lorenzo commented 10 months ago

I have a form of several pages where in one of them the user fills info in a repeater, then in the last page I show the summary of all the info entered by the user. The rest of the field I show them with in calculated fields and also

... But I can't get the fields out inside the repeater.

Is there a macro to display the repeater fields? Or another way?

Thanks in advanced

girafffee commented 10 months ago

Hi @Rene-Lorenzo,

Unfortunately, at the moment to solve your problem you need to use this code. Add it through any snippet plugin, like JavaScript code. Or through a native solution (https://developer.wordpress.org/reference/functions/wp_enqueue_script/) using PHP code.

jQuery( () => {
    const { addFilter, addAction } = JetPlugins.hooks;
    const { Filter }    = JetFormBuilderAbstract;

    function RepeaterFilter() {
        Filter.call( this );

        this.getSlug = function () {
            return 'repeaterTemplate';
        };

        /**
         * @param value {ObservableRow[]}
         */
        this.apply = function ( value ) {
            const rows = [];

            for ( const observableRow of value ) {
                const fields = [ '<ul>' ];

                for ( const input of observableRow.getInputs() ) {
                    fields.push( `<li>${ input.getValue() }</li>` );
                }

                fields.push( '</ul>' );

                rows.push( fields.join( '' ) );
            }

            return rows.join( '<hr/>' );
        }
    }

    RepeaterFilter.prototype = Object.create( Filter.prototype );

    addFilter(
        'jet.fb.filters',
        'custom-filter-for-repeater',
        function ( filters ) {
            filters.push( RepeaterFilter );

            return filters;
        },
    );

    addAction(
        'jet.fb.input.makeReactive',
        'trigger-repeater-on-each-change-inner-fields',
        /**
         * @param input {RepeaterData}
         */
        function ( input ) {
            if ( !input.hasParent() ) {
                return;
            }

            input.watch( () => {
                input.root.parent.value.notify();
            } );
        },
    );  
} );

You can then use the macro for the repeaterTemplate field repeater:

<!--JFB_FIELD::repeater_name|repeaterTemplate-->