Hiding empty elements from custom Email after form submit Elementor widget - Stack Overflow

admin管理员组

文章数量:1410689

I'm trying to customize the email which is sent to users after form submission. I'm using Elementor Pro widget (form) and I managed the output of the form to be ordered into a table inside my customer email.

Some of the inputs are dynamically generated based on previous input (i.e.: N partecipanti determines the number of text inputs for each partecipant).

The maximum number of participants is 6 so far I set up the table to get all the data this way:

<table id="table-iscrizioni">
    <tr>
        <th>Info Partecipanti</th>
    </tr>
    <tr>
        <td class="header">Numero Iscritti</td>
    </tr>
    <tr>
        <td>[field id="field_15be491"]</td>
    </tr>
    <tr>
        <th>Primo Partecipante</th>
    </tr>
    <tr>
        <td class="header">Nome</td>
    </tr>
    <tr>
        <td>[field id="field_b3cd45a"]</td>
    </tr>
    <tr>
        <td class="header">Cognome</td>
    </tr>
    <tr>
        <td>[field id="field_35663f8"]</td>
    </tr>
    <tr>
        <td class="header">Email</td>
    </tr>
    <tr>
        <td>[field id="field_d8b579c"]</td>
    </tr>
    <tr>
        <td class="header">Ruolo</td>
    </tr>
    <tr>
        <td>[field id="field_21379fe"]</td>
    </tr>
    <tr>
        <th>Secondo Partecipante</th>
    </tr>
    <tr>
        <td class="header">Nome</td>
    </tr>
    <tr>
        <td>[field id="field_8d39a70"]</td>
    </tr>
    <tr>
        <td class="header">Cognome</td>
    </tr>
    <tr>
        <td>[field id="field_7e0ae12"]</td>
    </tr>
    <tr>
        <td class="header">Email</td>
    </tr>
    <tr>
        <td>[field id="field_6d0e708"]</td>
    </tr>
    <tr>
        <td class="header">Ruolo</td>
    </tr>
    <tr>
        <td>[field id="field_8065898"]</td>
    </tr>

    <tr>
        <th>Terzo Partecipante</th>
    </tr>
    <tr>
        <td class="header">Nome</td>
    </tr>
    <tr>
        <td>[field id="field_9081d92"]</td>
    </tr>
    <tr>
        <td class="header">Cognome</td>
    </tr>
    <tr>
        <td>[field id="field_7361fde"]</td>
    </tr>
    <tr>
        <td class="header">Email</td>
    </tr>
    <tr>
        <td>[field id="field_874a76f"]</td>
    </tr>
    <tr>
        <td class="header">Ruolo</td>
    </tr>
    <tr>
        <td>[field id="field_0dd7619"]</td>
    </tr>

    <!-- Aggiungi qui le altre righe per i partecipanti successivi -->
</table>

after that I have added unique ID to the form and put in place this JS code to hide all the unpopulated row (based on participants): if participant = 1 than table must hide all other participants row, an so on.

here is my JS code which I need to fix:

document.addEventListener('DOMContentLoaded', function () {
    function nascondiRigheVuote() {
        var table = document.getElementById('table-iscrizioni');
        if (!table) return; // Evita errori se la tabella non esiste

        var rows = table.getElementsByTagName('tr');

        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var cells = row.getElementsByTagName('td');
            var isEmptyRow = true;

            for (var j = 0; j < cells.length; j++) {
                var cellContent = cells[j].textContent.replace(/\s/g, '').replace(/&nbsp;/g, '');
                if (cellContent !== '') {
                    isEmptyRow = false;
                    break;
                }
            }

            // Nascondi la riga solo se completamente vuota
            if (isEmptyRow) {
                row.style.display = 'none';
            }
        }
    }

    // Nasconde le righe inizialmente
    nascondiRigheVuote();

    // Rileva l'invio del modulo
    var form = document.querySelector('modulo_iscrizione_corso'); 
    if (form) {
        form.addEventListener('submit', function (event) {
            setTimeout(nascondiRigheVuote, 500); // Ritarda leggermente per attendere l'aggiornamento
        });
    }

    // Monitoraggio delle modifiche alla tabella
    var table = document.getElementById('table-iscrizioni');
    if (table) {
        var observer = new MutationObserver(nascondiRigheVuote);
        observer.observe(table, { childList: true, subtree: true });
    }
});

</script>

Any suggestions? Thanks for help in advance

Giio

本文标签： Hiding empty elements from custom Email after form submit Elementor widgetStack Overflow