如何以編程方式/隱式方式攔截從 Javascript 發送到 Googlesheet 的數據？

Question

我正在制作一個map 畫家程序，它從用戶輸入中獲取 X、Y 和顏色數據並將其存儲在Google 電子表格中。

按照此解決方案，數據以表格形式發送到電子表格。 如果用戶正在填寫“表單”並點擊“提交”按鈕，則此解決方案有效。 我有以下EventListener來監聽和攔截：

form.addEventListener("submit", function(e) {
      
    e.preventDefault();
   

    const newData = new FormData(form);
    const mapData = e.target.action

    console.log('+++++++++INTERCEPTING++++++++++')
       

  fetch(mapData, {
    method: 'POST',
    body: newData,
    
  })
  

LoadMap()

})

但是，當用戶只是在繪畫時，我想要一種無需用戶點擊提交即可將 X、Y 和顏色數據發送到電子表格的方法。 為此，我有以下function ：

 function paint() {

            var paintColour = document.getElementById("paintFill").value
           

            gridCTX.fillStyle = paintColour;
                 
            //PAINTS THE SQUARE
            console.log('')
            console.log('+++++++++PAINTING DATA++++++++++')
            console.log('Painting ' + gridCTX.fillStyle  + ' at ' + rx + ',' + ry)
            gridCTX.fillRect(rx * tileSize, ry * tileSize, tileSize, tileSize)
            paintArray.push({x:rx, y: ry, z: rz, fill: paintColour})
            console.table(paintArray)

           
            //AUTOMATICALLY FILL EDITOR AS PAINTING
            
            
            document.getElementById('testFill').value = paintColour
                
            //AUTOMAGICALLY SUBMIT FORM DATA
            document.forms['mapData'].submit();
            
              
            //NEED TO PREVENT DEFAULT
                      

          }

當調用paint()和document.forms['mapData'].submit()時，我知道EventListener不會在“提交”時觸發，因此指的是單擊按鈕而不是以編程方式提交的表單。

所以，我不確定如何繼續我的計划。 我有一些想法......除了“提交”之外還有其他事件可以處理程序化表單提交嗎？ 或者也許有一種方法可以將EventListener function(e)中包含的fetch等放入paint() function。

我想避免將用戶重定向到此屏幕：

我意識到 Post 和 Get 不是“安全的”，但數據不敏感。 我是 Javascript 的初學者，因此非常感謝解決此問題的任何幫助。

這與這個問題不同，后者詢問如何收聽在表單上單擊的提交按鈕。 我想根據document.forms['mapData'].submit()行“傾聽”或采取行動。

Answer 1

document.forms['mapData'].dispatchEvent(new Event('submit'));

我從這個問題中得到了答案。