在發出http請求之前調用表單提交的JS函數

當用戶提交表單（POSTs）時，我希望將選定的複選框值傳遞給Google Analytics以作爲Google Analytics儀表板中的自定義指標進行跟蹤。在發出http請求之前調用表單提交的JS函數

用戶將自己的選擇提交給服務器，該服務器首先調用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"); 
     } 
    }); 
}

來源

2015-06-02 Growler

如果你給你的表單的id屬性，你可以用做以下jQuery

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

或與out jQuery：

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

來源

2015-06-02 17:01:20

它說'sendDataToGA'功能沒有被定義 – Growler

您是否正確輸入你的HTML JS文件？你能提供更多的代碼嗎？ –

您可以在發送到服務器之前攔截提交事件。在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 
 
     } 
 
    }); 
 
});

來源

2015-06-02 17:06:21 Martin

謝謝，但我沒有在我的應用程序中使用jQuery – Growler

足夠簡單，您應該可以使用具有相同功能的onsubmit標記：onsubmit =「function（event）{...}」 – Martin

在發出http請求之前調用表單提交的JS函數

回答

相關問題