Question

我需要在动态生成表单的提交按钮中添加onclick事件，表单的简化版本如下所示：

<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

如果您尝试通过编码添加事件，可以使用 .addEventListener（） 将追加事件的javascript方法。

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

额外信息： - 这里[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
                        });
}

但是，根据HTML提供的判断，您使用的是Contact Form 7，它有内置的解决方案，因此如果您有权访问您的管理界面，则无需使用跟踪代码污染您的前端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){
	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) {
	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>

OnClick表单按钮

4 个答案: