Javascript 在http请求发生之前对表单提交调用JS函数

我想在用户提交（

发布

）表单时，将选中的复选框值传递给Google Analytics，作为Google Analytics仪表板中的自定义指标进行跟踪

用户将向服务器提交他们的选择，服务器将首先调用JS

sendDataToGA（selectedOption）{

函数将数据传递给GA，然后POST将运行

我该如何实现这一点？似乎

POST

正在启动，而没有调用JS函数

PHP/HTML:

    <?php if (!empty($_POST)): ?>
        Selection: <?php echo htmlspecialchars($_POST["option"]); ?><br>

    <?php else: ?>
        <!-- On form submit, fire a custom GA function to capture the selected option -->
        <form action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> method="post" > 
          <input type="checkbox" name="option" value="option 1">Option 1<br>
          <input type="checkbox" name="option" value="option 2">Option 2<br>
          <input type="submit" value="Submit" id="submitBtn" onclick="sendDataToGA(selectedOption);">
        </form>
    <?php endif; ?>

function sendDataToGA(selectedCheckboxValue) {
    ga('send', 'event', 'category', 'action', {
        'metric1': selectedCheckboxValue,
            'hitCallback': function () {
            console.log("data has been sent to Google Analytics");
        }
    });
}

---

如果为表单提供id属性，则可以使用

或者不使用jQuery：

<form action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> onsubmit="sendDataToGA(selectedOption)" method="post"> 
    ...
</form>

---

您可以在submit事件发布到服务器之前拦截它。在jQuery中，这是您在domReady事件中附加的处理程序。这假设您的表单具有id=“formid”，您可以通过设置everythingIsOkay=false来停止回发


$（文档）.ready（函数（）{
$（“#formid”）.submit（函数（事件）{//捕获表单提交事件
event.preventDefault（）；//除非您告诉它，否则请停止它发回
var everythingIsOkay=true；
//你在这里处理吗
如果（每件事都可以）{
document.forms[“formid”].submit（）；//继续并发回
}
});
})
谢谢，但我在我的应用程序中使用jQuery不够简单，您应该能够使用onsubmit标记和相同的函数：onsubmit=“function（event）{…}”它说
sendDataToGA
函数没有定义您是否正确地在HTML中导入JS文件？您能提供更多的代码吗？
<form action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> onsubmit="sendDataToGA(selectedOption)" method="post"> 
    ...
</form>