Problem with JS Code EventListener submit in BF Pro Forms

How To
1

Hi,
I tried to use vanilla-JS in Code-Element in BricksForge within the JS-Box.
Unfortunatelly I can not figure out, why the code as it own is working, so the event is triggern, but then the change of a form-field value is not written in the DB (Submission).

  • Any ideas or helping hints?

Can not find any solution in the doc: Event List - Bricksforge – One Plugin. Countless Possibilities.
Only this entry in forum: BricksForge Events: expose much more events than Bricks will ever do…
And this: Interaction for Form Submit - #4 by Cyrus

But first does not help to find why vanillaJS is not working and second is pointing to the BF-Panel. But I would like to have the possibillity to create JS-Code in Code-Block who is working…

current JS-Code in the Code-Element Box “Java Script”:

async function generateUniqueId(email) {
    // Aktuellen Zeitstempel in Millisekunden
    const timestamp = Date.now();

    // Kombiniere die E-Mail-Adresse und den Zeitstempel
    const data = `${email}-${timestamp}`;

    // Erzeuge den Hash der kombinierten Daten
    const encoder = new TextEncoder();
    const dataBuffer = encoder.encode(data);
    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
    
    // Wandle den Hash in eine Hexadezimaldarstellung um
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');

    // Rückgabe der einzigartigen ID
    return hashHex;
}

// Füge den Event-Listener zum Pro Forms Formular hinzu
document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('#sortable-form'); // Ändere dies zu deiner Formular-ID

    form.addEventListener('submit', async function (e) {
        e.preventDefault(); // Verhindere das Standard-Submit-Verhalten

        // E-Mail-Adresse aus dem Eingabefeld extrahieren
        const emailInput = form.querySelector('input[type="email"]'); // Stelle sicher, dass das Feld den Typ "email" hat
        const email = emailInput.value;

        // Generiere die einzigartige ID
        const uniqueId = await generateUniqueId(email);
        console.log('Eindeutige ID:', uniqueId);

        // Speichere die ID in einem versteckten Feld
        let hiddenInput = form.querySelector('#unique_id input'); // Stelle sicher, dass das versteckte Feld vorhanden ist
        if (!hiddenInput) {
            hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'unique_id';
            form.appendChild(hiddenInput);
        }
        hiddenInput.value = uniqueId;

        // Sende das Formular jetzt manuell
        form.submit();
    });
});

The code is working, and the trigger is execute it.
Also the hidden-field in Source-Tab in Dev-Tools shows the right value.

Bildschirmfoto 2024-10-01 um 14.07.08
Bildschirmfoto 2024-10-01 um 14.07.081151×218 70.8 KB

BUT in the Submission and E-Mail the value is “” (empty). Or default-value if I set a default value to “default-value”.

Would be great to get a helping hand.

2

Have found a working solution with “on Change”-Event connected to the email-field.

  • But why is the Event “on Submit” (submit) not usable?

  • I guess I missunderstood something elementary - but I can NOT figure it out: Any Help?

Here the code for all who would like to use it on the same way:

async function generateUniqueId(email) {
    // Aktuellen Zeitstempel in Millisekunden
    const timestamp = Date.now();

    // Kombiniere die E-Mail-Adresse und den Zeitstempel
    const data = `${email}-${timestamp}`;

    // Erzeuge den Hash der kombinierten Daten
    const encoder = new TextEncoder();
    const dataBuffer = encoder.encode(data);
    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
    
    // Wandle den Hash in eine Hexadezimaldarstellung um
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');

    // Rückgabe der einzigartigen ID
    return hashHex;
}

// Füge den Event-Listener zum Pro Forms Formular hinzu
document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('#sortable-form'); // Ändere dies zu deiner Formular-ID
    const emailInput = form.querySelector('input[type="email"]'); // Stelle sicher, dass das Feld den Typ "email" hat

    // Event-Listener für 'change'-Ereignis
    emailInput.addEventListener('change', async function () {
        const email = emailInput.value;

        // Generiere die einzigartige ID
        const uniqueId = await generateUniqueId(email);
        console.log('Eindeutige ID:', uniqueId);

        // Speichere die ID in einem versteckten Feld
        let hiddenInput = form.querySelector('#unique_id input'); // Stelle sicher, dass das versteckte Feld vorhanden ist
        if (!hiddenInput) {
            hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'unique_id';
            form.appendChild(hiddenInput);
        }
        hiddenInput.value = uniqueId;

        // Optional: Sende das Formular jetzt manuell, wenn gewünscht
        // form.submit(); 
    });
});