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

Question

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