通过JavaScript向表单添加onsubmit事件

Question

如何通过JavaScript将OnSubmit属性插入表单？

我对JavaScript很陌生，如果您能提供详细的示例代码，那将非常有帮助！

这是情况：我正在使用Chargify（一个支付平台）的托管注册页面来处理我的应用程序的信用卡付款，然后将用户发送回我的感谢/确认页面。

由于信用卡页面由Chargify在其自己的域上托管，因此通过Google Analytics跟踪整个漏斗非常困难，因为域名不断变化（我的域-> Chargify.com-> 我的域）。

我接近成功了：我已经能够使跨域跟踪起作用（Chargify.com页面在Google Analytics中被记录），并且可以通过将以下onclick属性添加到我的注册链接来从我的域链接到chargify：

onclick="_gaq.push(['_link', 'http://my-domain.chargify.com/subscriptions/new']); return false;"

然而，在返回的过程中（从Chargify到确认页面），我无法做相同的事情，因为我没有访问Chargify托管的付款页面代码，并且因为用户是通过表单提交而不是正常链接转到我的确认页面。

部分解决方案（需要您的帮助完成）： Chargify允许其托管页面有几种选项之一是添加自定义JavaScript，该JavaScript将插入到</body>标签之前的<script>标记中。

我在Google Analytics文档中找到了一些关于链接页面的资源，将以下内容添加到Chargify表单标记中可能有效： onsubmit="_gaq.push(['_linkByPost', this]);" （来源：https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._linkByPost）

表单标记目前没有onsubmit属性，只是这样：<form action="/my_product/subscriptions" class="new_submission" id="hosted_payment_form" method="post"> 是否有一种使用JavaScript来简单地将此属性附加到表单标记的方法？如果您能够提供应该插入到<script>标记内的代码的详细示例，那将非常感激。

- alex

---

这个链接展示了两种不同的方法来实现这个功能：https://dev59.com/D1_Va4cB1Zd3GeqPVJ0M - WebStakker

不是回避问题，但我强烈建议在处理表单相关的事情时使用PHP。 - aug

@aug 我希望我能在这里使用PHP，但正如我的问题所述，我只能自定义一些JavaScript，该JavaScript将被插入到“</body>”标记的上方。 - alex

Answer 1

window.onload = function() {
    var form = document.getElementById('hosted_payment_form');
    form.onsubmit = function() {
        _gaq.push(['_linkByPost', this]);
    }
}

我相信上面的例子与你所需的类似。我们使用document.getElementById来获取对你的表单的引用，然后将onsubmit属性设置为在提交表单之前要执行的代码。请记住，如果这个JavaScript在页面呈现之前执行，把它放在window.onload事件中以确保表单已经构建。

- Weave

---

谢谢！由于JavaScript加载时表单已经呈现（在</body>标签之前插入），这是否会改变您上面的方法或者它仍然可以正常工作？ - alex

@alex 如果表单已经被渲染，那么就不需要将其放在window.onload事件处理程序中。因此，您不需要使用window.onload = function() {}来包装它。该事件在页面完成渲染时触发。我之所以添加这个是为了安全起见，因为我无法确定脚本将加载到哪里。 - Weave