Creating Summary Table with HTML and Calculated Fields

Resolved

(@eberkland)

I followed the directions on this post, but I’m having trouble getting a Checkbox field to display all ticked choices.

Here is the setup:

Assign choices to Checkbox Field (fieldname359 – this is working, example:

    function setCheckboxAddonSelections() {
        // Initialize arrays for labels and values
        let texts = [];
        let values = [];

        if (fieldname381 > 0) {
        texts.push(CONCATENATE('<span class="pchoice-label">Backing</span><span class="pchoice-value-contain"><span class="pchoice-listmfg">', formatCurrency(fieldname381|v), '</span><span class="pchoice-listmfg">', formatCurrency(fieldname443|v), '</span><span class="pchoice-promo">', formatCurrency(fieldname444|v), '</span></span>'));
        values.push(1);
        }

etc. etc. etc.

Checkbox Field Settings (fieldname359):

Merge ticked-up options is checked in settings
Value to submit is set to Choice Value in settings

HTML Field html (fieldname1262):

<div class="summary-here"></div>
<div class="summary-here-also"></div>

AUX Calculated Field (NOT WORKING)

(function() {
    var summary = '<table>' +
        '<thead><tr>' +
        IF(fieldname359, '<th>Component</th>', '') +
        IF(fieldname359, '<th>Price</th>', '') +
        '</tr></thead>' +
        '<tbody>' +
        IF(fieldname359|v == 1, 
            '<tr>' +
                '<td>Backing</td>' +
                '<td>' + fieldname381|v + '</td>' +
            '</tr>', 
        '') +
        IF(fieldname359|v == 2, 
            '<tr>' +
                '<td>Accent</td>' +
                '<td>' + fieldname432|v + '</td>' +
            '</tr>', 
        '') +
        '</tbody>' +
        '</table>';

    jQuery('.summary-here-also').html(summary);
    return summary;
})();

At one point, I was able to get a single row to display using a version of code for a radio button, that code is below.

Long story, short… I want any field that is ticked in checkbox field to display a product name and a price. However; 1) The checkbox choices are generated dynamically, 2) The Text/Label in the checkboxes field that is assigned is done so dynamically with custom formatting.

(function() {
    // Add styles
    var styles = <br>        table {<br>            width: 100%;<br>            border-collapse: collapse;<br>            margin: 20px 0;<br>            font-size: 16px;<br>            text-align: left;<br>        }<br>        th, td {<br>            border: 1px solid #ddd;<br>            padding: 8px;<br>        }<br>        th {<br>            background-color: #f4f4f4;<br>            font-weight: bold;<br>        }<br>        .list-column {<br>            text-align: right; /* Float-like effect for List column */<br>        }<br>        tbody tr:nth-child(even) {<br>            background-color: #f9f9f9;<br>        }<br>        tbody tr:hover {<br>            background-color: #f1f1f1;<br>        }<br>;
    var styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // Generate the table
    var summary = '<table>' +
        // First header row
        '<thead><tr>' +
        IF(fieldname122, '<th>Product Line</th>', '') +
        IF(fieldname122, '<th class="list-column">List</th>', '') +
        '</tr></thead>' +
        // First data row
        '<tbody>' +
        IF(fieldname122, '<tr>' +
            // Product Line
            IF(fieldname122|v == 1, '<td>Everyday</td>', '') +
            IF(fieldname122|v == 2, '<td>Classic</td>', '') +
            IF(fieldname122|v == 3, '<td>Regency</td>', '') +
            IF(fieldname122|v == 4, '<td>Brio Everyday</td>', '') +
            IF(fieldname122|v == 5, '<td>Brio Classic</td>', '') +
            // List Price
            IF(fieldname122|v == 1, '<td class="list-column">' + fieldname123|v + '</td>', '') +
            IF(fieldname122|v == 2, '<td class="list-column">' + fieldname126|v + '</td>', '') +
            IF(fieldname122|v == 3, '<td class="list-column">' + fieldname129|v + '</td>', '') +
            IF(fieldname122|v == 4, '<td class="list-column">' + fieldname132|v + '</td>', '') +
            IF(fieldname122|v == 5, '<td class="list-column">' + fieldname135|v + '</td>', '') +
        '</tr>', '') +
        '</tbody>' +
        '</table>';

    jQuery('.summary-here').html(summary);
    return summary;
})();

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author

CodePeople2

(@codepeople2)

1 year, 5 months ago

Hello @eberkland

Could you please provide the link to the page containing the form to check the code in action?

Best regards.

Thread Starter

eberkland

(@eberkland)

1 year, 5 months ago

Sorry, I can’t give you the link in a public forum because the site contains proprietary pricing information. However, I figured out this solution, which works, but there is probably a more efficient way to do this. Here is the code for anyone who is interested:

(function() {
    // Retrieve the array of selected values from the checkbox field
    var selectedValues = fieldname359|r; // Use |r to retrieve the raw value (array of selections)
    
    var summary = '<table>' +
        '<thead><tr>' +
        '<th>Component</th>' +
        '<th>Price</th>' +
        '</tr></thead>' +
        '<tbody>';
    
    // Check if there are any selected values
    if (selectedValues.length > 0) {
        // Loop through each selected value and construct table rows
        for (var i = 0; i < selectedValues.length; i++) {
            if (selectedValues[i] == 1) {
                summary += '<tr>' +
                    '<td>Backing</td>' +
                    '<td>' + fieldname381|v + '</td>' +
                    '</tr>';
            }
            if (selectedValues[i] == 2) {
                summary += '<tr>' +
                    '<td>Accent</td>' +
                    '<td>' + fieldname432|v + '</td>' +
                    '</tr>';
            }
            // Add more conditions as needed for other checkbox values
        }
    } else {
        // No values selected
        summary += '<tr><td colspan="2">No components selected</td></tr>';
    }
    
    summary += '</tbody></table>';

    // Update the target element with the generated summary
    jQuery('.summary-here-also').html(summary);
    return summary;
})();