Create summary of checked checkboxes

Question

I currently have a quote system in Wordpress which uses Contact Form 7 and accordions so the user can go through each accordion and checkbox what things they want before they click the submit button. I would like to create a summary of the things they have selected at the bottom of the page under the titles of the accordions e.g. Vegetarian canapes. I believe this would be done in javascript but not 100%, can anyone help?

The name="" of the first accordion of checkboxes is "checkbox-537[]" and then there are a few more following e.g. "checkbox-538[]", "checkbox-539[]"

much appreciated

Can you post the full form code (you know, with those CF7 form-tags such as [text* your-name]), or the full generated <form>...</form> source code? — Sally CJ
@Sally here it is with the CF7 form tags. Baring in mind that I am using a different plugin for the accordion drop down shortcodes. shrib.com/?v=md#aBvKzCwqhaLBA3vfGsWZ — Zac
Thank you, but can you also share the generated <form>...</form> code? (I have a working solution for you, but I need to see the generated code first.) Alternatively, let me know the accordion plugin (name and version) that you use. — Sally CJ
@Sally I use the 'Accordion Shortcodes' plugin on version 2.3.3. Here is the form generated code :) use a html beautifier to get the html structure of the code shrib.com/#-yVBM2cBvN7TaOR9zFGr — Zac
Please try the script I provided via my answer. Hopefully it works for you. — Sally CJ

Sally CJ Sally CJ · Accepted Answer · 2018-03-03T16:27:12

Here is the JS/jQuery script:

jQuery( function( $ ) {
    var template = {
        before_title : '<b>',    // HTML before the summary title.
        after_title  : ':</b> ', // HTML after the summary title.
        before_list  : '<p>',    // HTML before each summary.
        after_list   : '</p>',   // HTML after each summary.
        before_item  : '<i>',    // HTML before an item in the summary.
        after_item   : '</i>',   // HTML after an item in the summary.
        items_sep    : ', ',     // HTML or text separating the items.
        cont_class   : ''        // Custom CSS class for the summary.
    };

    function getSummaryHtml( title, items, klass ) {
        var t = template;

        if ( t.cont_class ) {
            klass = $.trim( t.cont_class + ' ' + klass );
        }

        return '' + // wrapped
        '<div class="' + klass + '">' +
            t.before_title + title + t.after_title +
            t.before_list + t.before_item +
            items.join( t.after_item + t.items_sep + t.before_item ) +
            t.after_item + t.after_list +
        '</div>';
    }

    function displaySummary( input, title ) {
        var $form = $( input ).closest( 'form.wpcf7-form' ),
            name = $( input ).attr( 'name' ),
            s = 'input[name="' + name + '"]:checked',
            klass = name.replace( '[]', '' ),
            items = [];

        $( input ).closest( '.wpcf7-checkbox' ).find( s ).each( function() {
            var label = $( this ).find( '.wpcf7-list-item-label' ).text();

            items.push( label || this.value );
        } );

        klass = 'cf7-cb-summary-' + klass;
        $form.find( '.' + klass ).remove();

        s = getSummaryHtml( title, items, klass );
        items = undefined;

        $form.find( '.cf7-checkbox-summary' ).append( s )
            .show();
    }

    $( 'form.wpcf7-form:has(.cf7-checkbox-summary)' ).each( function() {
        $( this ).find( '.wpcf7-checkbox', '.acc-container' ).each( function() {
            var s = 'input[name$="[]"]',
                title;

            title = $( this ).closest( '.acc-container' )
                .prev( '.acc-trigger' ).text() || 'Other';

            $( this ).find( s ).on( 'change', function() {
                displaySummary( this, title );
            } );
        } );
    } );
} );

Or you can download it here.

Upload it to your site (e.g. to wp-content/themes/your-theme/js) and load it from the pages with the form in question. (If you need help with that, let me know the page ID or IDs, and I'll write the PHP snippet for you.)

Next, add this code anywhere in the CF7 form template, where you'd like the summary to appear:

<div class="cf7-checkbox-summary">
    <h4>Your Preferred Recipes</h4>
    <noscript>Please enable JavaScript.</noscript>
</div>

(You may edit the other parts in the above code, but keep the cf7-checkbox-summary in the class attribute.)

The file here includes comments about the summary's appearance, which by default looks like this (on Twenty Seventeen 1.4):

[EDIT] Here's the PHP snippet which properly loads the custom JS file only on the pages you specified: (Add the snippet to the theme's functions.php file.)

// Enqueues the JS file for the CF7 checkbox summary.
add_action( 'wp_enqueue_scripts', function() {
    // Enqueues only on specific pages. Set/edit the page IDs below.
    $page_ids = array( 7432, 9108, 9120, 9114, 9125, 9130, 9133, 9138 );

    if ( is_page( $page_ids ) ) {
        // Here I assumed the JS file is saved as cf7-checkbox-summary.js in
        // wp-content/themes/your-theme/js/, where "your-theme" is the theme
        // folder name. If necessary, edit the path.
        wp_enqueue_script( 'cf7-checkbox-summary', get_theme_file_uri( '/js/cf7-checkbox-summary.js' ), array( 'jquery' ), '20180303' );
    }
} );

Create summary of checked checkboxes

1 Answers