Question

我正在使用html表单。当用户单击“提交”按钮时，应将其带到我网站上的验证页（另一个html文件）。但是，当我单击“提交”时，似乎没有执行任何操作，因为它没有转到其他页面。

我将表单链接到Google电子表格，并且当用户单击“提交”时，它就达到了预期的目的（将信息发送到表单）。但是，我也想转到另一页。我在标签之前使用了带有href的标签，在标签之后也尝试了它。当我将标签放在标签之后时，它确实会转到另一页，但是提交的信息不会进入表单。我正在考虑使用onclick（实际上是尝试过的……没有用），但是我不太了解JavaScript。

    <form  class= "form" name="submit-to-google-sheet">
        <input class= "inputbox" name= "first_name" type= "text" placeholder= "First Name" required>
        <input class= "inputbox" name= "last_name" type= "text" placeholder= "Last Name" required>
        <input class= "inputbox" name= "email_address" type= "email" placeholder= "Email" required>

        <button type="submit">Send</button> 
    </form>

    <script>
        const scriptURL = 'https://samplegooglesite/exec'
        const form = document.forms['submit-to-google-sheet']

        form.addEventListener('submit', e => {
            e.preventDefault()
            fetch(scriptURL, { method: 'POST', body: new FormData(form)})
            .then(response => console.log('Success!', response))
            .catch(error => console.error('Error!', error.message))
        })
    </script>

此处的代码会将信息提交到表单，单击“发送”按钮后仅不显示新页面。没有错误弹出。谢谢您的帮助。

Answer 1

成功完成表单后，您无需重定向用户，您需要使用then()方法来重定向用户

    <form  class= "form" name="submit-to-google-sheet">
        <input class= "inputbox" name= "first_name" type= "text" placeholder= "First Name" required>
        <input class= "inputbox" name= "last_name" type= "text" placeholder= "Last Name" required>
        <input class= "inputbox" name= "email_address" type= "email" placeholder= "Email" required>

        <button type="submit">Send</button> 
    </form>

    <script>
        const scriptURL = 'https://samplegooglesite/exec'
        const form = document.forms['submit-to-google-sheet']

        form.addEventListener('submit', e => {
            e.preventDefault()
            fetch(scriptURL, { method: 'POST', body: new FormData(form)})
            .then(response => { window.location.href = 'https://yourwebsite.com'; })
            .catch(error => console.error('Error!', error.message))
        })
    </script>

链接到另一个HTML页面的按钮标签

1 个答案: