OnClick Form Knopf

Question

Ich brauche ein Onclick-Ereignis auf eine Submit-Button einer dynamicaly erzeugten Form, und das vereinfachte Version von Form wie folgt aussieht hinzuzufügen:

<div class="form"> 
    <form action="demo_form.php"> 
    <input type="text" name="fname" placeholder="First name"><br> 
    <input type="text" name="lname" placeholder="Last name"><br> 
    <input type="submit" value="Submit" class="wpcf7-submit"> 
    </form> 
</div> 

Ich frage mich, ist dies der richtige Weg hinzufügen es (ich bin ein Javascript Neuling), ist auch bekannt als der Code korrekt diese

document.getElementsByClassName('.form .wpcf7-submit').onclick = ga('send', 'event', { eventCategory: 'Contact Form', eventAction: 'Submit', eventLabel: 'Send Contact', eventValue: 50});; 

Answer 1

formated Versuchen:

document.getElementsByClassName('.wpcf7-submit')[0].onclick = function() { 
    ga('send', 'event', { eventCategory: 'Contact Form', eventAction: 'Submit', eventLabel: 'Send Contact', eventValue: 50});; 
} 

Answer 2

Wenn Sie versuchen, Ereignis via Coding hinzuzufügen, können Sie .addEventListener() Methode von Javascript verwenden, das Ereignis anhängen wird.

document.getElementsByClassName(".form .wpcf7-submit'")[0].addEventListner("click",YourFunctionName); 

Geschichte: - Hier [0] ist ein Index für dieses Element können Sie festlegen, was Element, das Sie holen wollen. Außerdem Index beginnt immer bei 0. Echtzeit Beispiel: -

<p class="Test"></p> 
<p class="Test"></p> 

document.getElementsByClassName("Test")[0].addEventListner("click",Fade); 

Dieses Element bei 0 oder ersten <p> Tag holen wird

Answer 3

Wie andere bereits festgestellt haben, können Sie so etwas wie dies auf dem Frontend tun könnten:

document.querySelector('.wpcf7-submit').onclick = function() { 
    ga('send', 'event', { 
          eventCategory: 'Contact Form', 
          eventAction: 'Submit', 
          eventLabel: 'Send Contact', 
          eventValue: 50 
         }); 
} 

jedoch judgint vom HTML zur Verfügung gestellt, die Sie verwenden Kontaktformular 7, die für diese Lösungen in gebaut hat, so müssen Sie nicht auf Ihrem Frontend mit Tracking-Code verschmutzen, wenn Sie den Zugriff auf die haben Admin-Schnittstelle Ihrer WP-Installation.

einfach die folgenden auf die ‚weiteren Einstellungen‘ Ihre WPCF7 Einstellungen Seite hinzufügen:

on_sent_ok: "ga('send', 'event', { eventCategory: 'Contact Form', eventAction: 'Submit', eventLabel: 'Send Contact', eventValue: 50});" 

Ich mag an einem Ort meines Kontaktformular bezogene Funktionalität halten, aber das ist auf dem persönlichen Vorlieben auf.

Answer 4

Da Sie jQuery markiert, ist hier eine Demo Alternative jQuery:

// adding an on click event on the form's submit button 
 
$('.form .wpcf7-submit').on('click', function(e){ 
 
\t e.preventDefault(); // NOTE: comment this out to let the form execute demo_form.php 
 
    
 
    // call ga() function with the necessary parameters 
 
    ga('send', 'event', { eventCategory: 'Contact Form', eventAction: 'Submit', eventLabel: 'Send Contact', eventValue: 50}); 
 
    
 
}) 
 

 
function ga(eventname, purpose, formObject) { 
 
\t console.log(eventname); 
 
    console.log(purpose); 
 
    console.log(formObject); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 
    <form action="demo_form.php"> 
 
    <input type="text" name="fname" placeholder="First name"><br> 
 
    <input type="text" name="lname" placeholder="Last name"><br> 
 
    <input type="submit" value="Submit" class="wpcf7-submit"> 
 
    </form> 
 
</div>