的OnClick表单按钮

我需要一个onclick事件添加到dynamicaly生成的表单的提交按钮和表单的简化版本是这样的：的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});;

来源

2016-11-01 Vlidurno

你为什么标记的jQuery？ – putvande

只是为了看看有人有一个更好的jQuery替代我以上写的:) – Vlidurno

正确格式化代码试试这个：

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

来源

2016-11-01 12:39:34

如果我可以，一个问题:)会有更简单的方法来追加这onClick =“ga（'发送'，'事件'，{ eventCategory：'Contact Form'，eventAction：'发送联系人'，eventLabel：'发送'，eventValue：50}）;“到提交按钮？ – Vlidurno

不，你不能使用ga（...）不包裹到额外的功能，因为这样ga将立即被调用，而不是点击事件。此外，使用html on属性也是不好的做法。 –

啊，好吧，我想我明白了，谢谢！如果你不介意，你可以看看这个，并建议它会工作吗？https://jsfiddle.net/ctm2chnj/1/ – Vlidurno

如果您尝试通过编码添加事件，您可以使用.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>标签读取元素

来源

2016-11-01 12:56:21

正如其他人已经指出的那样，你可以做这样的事情在前端：

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

然而，所提供的HTML judgint，您正在使用联系表7，其中内置了解决方案，为这个，所以你不必与污染跟踪代码的前端，如果你有机会获得你的WP安装的管理界面。

只需添加以下到您的WPCF7设置页面的“其他设置”部分：

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

我喜欢让我的联系形式相关的功能在同一个地方，但是这完全取决于个人喜好。

来源

2016-11-01 13:37:10 ppajer

既然你标记的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>

来源

2016-11-02 02:59:11 four

的OnClick表单按钮

回答

相关问题