OnClick кнопки формы

Question

мне нужно добавить событие OnClick для кнопки отправки в виде dynamicaly генерироваться формы и упрощенный вариант формы выглядит следующим образом:

<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> 

мне было интересно, это правильный путь, чтобы добавить это (я являюсь Javascript новичку), иначе это код отформатирован правильно

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

Answer 1

Попробуйте это:

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

Answer 2

Если вы пытаетесь добавить событие через codding, вы можете использовать .addEventListener() метод javascript, который добавит событие.

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

Extra Info: - Здесь [0] является индекс этого элемента вы можете указать любой элемент, который вы хотите извлечь. Кроме того индекс всегда начинается с 0. Пример реального времени: -

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

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

Это загрузит элемент при 0 или первый <p> тег

Answer 3

Как уже отмечали другие, вы могли бы сделать что-то вроде этого на веб-интерфейсе:

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

Однако judgint в HTML при условии, что вы используете контактную форму 7, которая имеет встроенные решения для этого, так что вы не должны загрязнять свой внешний интерфейс с кодом отслеживания, если у вас есть доступ к admin интерфейс вашей установки WP.

Просто добавьте следующие строки в разделе «Дополнительные настройки» на странице настроек WPCF7:

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

Я хотел бы сохранить функциональность, связанную мой контакт формы в одном месте, но это до личных предпочтений.

Answer 4

Поскольку вы помечено JQuery, Вот 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>