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

Question

我想在用户提交 (POSTs) 表单时将选定的复选框值传递给 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; ?>

JS:

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

Answer 1

如果你给你的表单一个 id 属性，你可以使用 jQuery

执行以下操作

$("#myForm").submit(function () {
    ga(...);
});

或没有jQuery:

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

Answer 2

您可以在提交事件发送到服务器之前拦截它。在 jQuery 中，这是您在 domReady 事件中附加的处理程序。这假设您的表单具有 id="formid"，并且您可以通过设置 everythingIsOkay = false.

来停止回发

$(document).ready(function () {
    $("#formid").submit(function(event) { //Catch form submit event
        event.preventDefault(); //Stop it from posting back unless you tell it to
        var everythingIsOkay = true;
      
        //Do your processing here
      
        if(everythingIsOkay){
            document.forms["formid"].submit(); //Go ahead and postback
        }
    });
});

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

Call JS function on form submit before http request occurs

javascript

php

google-analytics