Webotvůrci

Menu

Návod na použití custom eventů

Upraveno: 8. 8. 2024
Jste zde:
Délka čtení: 1 min
V tomto článku:

Doplněk Kontaktní formuláře nyní podporuje custom eventy pro sledování úspěšného a neúspěšného odeslání formuláře. Tento návod vám ukáže, jak tyto eventy využít ve vašem projektu.

Dostupné eventy

  1. wtFormSubmitSuccess: Vyvolán při úspěšném odeslání formuláře.
  2. wtFormSubmitFail: Vyvolán při neúspěšném odeslání formuláře.

Jak poslouchat eventy

Můžete přidat posluchače těchto eventů na úrovni dokumentu nebo na konkrétním elementu formuláře.

Příklad poslouchání na úrovni dokumentu:

document.addEventListener('wtFormSubmitSuccess', function (event) {
     console.log('Formulář úspěšně odeslán!');
     console.log('ID formuláře:', event.detail.formId);
     console.log('Odpověď serveru:', event.detail.response);
  // Zde můžete přidat vlastní logiku pro zpracování úspěšného odeslání
 });
 
 document.addEventListener('wtFormSubmitFail', function(event) {
    console.error('Chyba při odesílání formuláře!');
    console.error('ID formuláře:', event.detail.formId);
    console.error('Chybová zpráva:', event.detail.error); 
    // Zde můžete přidat vlastní logiku pro zpracování neúspěšného odeslání
 });

Příklad poslouchání na konkrétním formuláři:

const formWrapper = document.querySelector('#wt-form-wrapper-123'); // Nahraďte '123' skutečným ID formuláře 

formWrapper.addEventListener('wtFormSubmitSuccess', function(event) {
     console.log('Tento konkrétní formulář byl úspěšně odeslán!');
      // Vlastní logika... 
    });
    
formWrapper.addEventListener('wtFormSubmitFail', function(event) {
     console.error('Chyba při odesílání tohoto konkrétního formuláře!'); 
     // Vlastní logika... 
});

Dostupná data v eventech

Pro wtFormSubmitSuccess:

  • event.detail.formId: ID odeslaného formuláře
  • event.detail.response: Odpověď serveru po úspěšném odeslání

Pro wtFormSubmitFail:

  • event.detail.formId: ID formuláře, který selhal při odesílání
  • event.detail.error: Chybová zpráva popisující důvod selhání

Příklady použití

Zobrazení vlastní zprávy o úspěchu:

document.addEventListener('wtFormSubmitSuccess', function(event) { alert('Děkujeme za odeslání formuláře ' + event.detail.formId + '!'); });

Logování chyb do analytického systému:

document.addEventListener('wtFormSubmitFail', function(event) { myAnalyticsSystem.logError('Form submission failed', { formId: event.detail.formId, errorMessage: event.detail.error }); });

Aktualizace UI po úspěšném odeslání:

document.addEventListener('wtFormSubmitSuccess', function(event) { const successMessage = document.createElement('div'); successMessage.textContent = 'Formulář úspěšně odeslán!'; successMessage.className = 'success-message'; document.querySelector('#wt-form-wrapper-' + event.detail.formId).appendChild(successMessage); });

Tyto eventy vám umožňují flexibilně reagovat na výsledky odesílání formulářů a přizpůsobit chování pluginu podle potřeby.

Pomohl Vám tento článek?
Dislike 0 3 z 3 shledali tento návod přínosný.