表单提交到Google Sheets后如何在alert弹窗触发后执行页面跳转

问题原因 #

fetch 是异步执行的API，你当前把表单重置、页面跳转的代码放在了fetch调用的外层，代码执行时不会等待fetch请求完成、弹窗触发，就会直接执行跳转逻辑，因此会出现数据还没提交完成就提前跳转的问题。

解决方案 #

把需要等待提交完成后执行的逻辑，全部放到fetch的.then回调里，保证只有请求成功、用户点击alert的确认按钮后才会执行后续操作。同时可以补充错误场景的提示，避免提交失败用户无感知。

修改后的代码如下：

<script>
    const scriptURL = 'https://script.google.com/macros/s/AKfycbyXViROC5iq7PdxoCufOn5XfJTyArkmdQul_-pWwJ3Yc9GpwmZpO0WR2tkeVNUPA47u/exec'
    const form = document.forms['google-sheet']

    form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => {
            alert("Salamat po sa pag fill-out! Paki-wait nalang po ang aming call...")
            // 提交成功、用户确认弹窗后再执行重置+跳转
            document.getElementById("rider-form").reset();
            // 注意跳转外部域名需要加http/https前缀，否则会识别为当前站点的相对路径
            window.location.href='https://digitsorani.net';
        })
        .catch(error => {
            console.error('Error!', error.message)
            alert('提交失败，请稍后重试')
        })
    })
</script>

注意事项 #

• 如果你的跳转目标是外部站点，必须给window.location.href的值加上http://或者https://前缀，否则浏览器会把它当成当前网站下的子路径跳转，出现404错误。
• 错误回调里补充了提交失败的提示，避免用户提交出错却不知道，还等待跳转的情况。

内容的提问来源于stack exchange，提问作者Erwin Manalang