时间戳

首页 > 解决方案 > 动态 html 表单数据 AJAX 重定向到谷歌表格错误

javascript - 动态 html 表单数据 AJAX 重定向到谷歌表格错误

问题描述

我正在努力将表单数据从动态用户表单发送到谷歌表格页面。有 140 个潜在形式的语料库，随机显示 20 个用户。我在控制台中没有收到任何错误，但没有填充谷歌表。我知道 sheet gs 脚本没问题，因为在更简单的用例下连接工作正常。

我在下面包含了 html 和 js 代码。该网站在我的本地机器上呈现良好。图像和形式的内容也很有效。

<!DOCTYPE html>

<body>
<!-- Required JS packages for this project-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script src="jquery-3.3.1.min.js"></script>
<script src="require.js"></script>
    
<!--Create empty form element  -->
<div id = "form_submit"></div>

<!-- JS function to fill form element with 20 hold type questions forms -->
<script>
        // Establish file name to hold mapping with two lists and a dict to link elements
        var files = ['1.png', '10.png', ..., '98.png', '99.png']
        var numWords = ["one", "two", "three",.., "one_hundred_and_fifty"]
        var numWordDict = { 1: 'one', ..., 150: 'one_hundred_and_fifty' }        // Generate list of 20 random digits that will select holds to be classified
       
        // Create array of twenty random holds
        var idx = []
        for (var j = 0; j < 20; j++) {
            idx.push(Math.floor(Math.random() * 140) + 0)
        }
        console.log(idx)

        // Loop over array and make a form element for each hold within the div element
        $(document).ready(function (list) {
            for (var i = 0; i < idx.length; i++) {
                // retrieve mapped index 
                var randHoldIdx = idx[i]
                // build path to hold image
                var holdPath = files[randHoldIdx]
                var numb = holdPath.match(/\d/g);
                numb = numb.join("");
                var colName = numWordDict[numb]
                var form_name = 'submit-to-google-sheet' + numb
                const scriptURL = 'https://script.google.com/macros/s/AKfycbyhMLuTGNkaNOxeNCOx_t1ERThZT8VEYDcMmiQhj773kIrUuRA/exec'

                // Form element contents will be appended into the div element with id = form_submit
                $("#form_submit").append(
                    //  html form skeleton for users to select jug,pinch, crimp, pocket or undercling from radio button
                    //  options
                    "<form name = " + form_name + ">"+
                    "<input type='radio' name = " +colName + " class=" + String(colName) +" value=1>Jug<br>" +
                    "<input type='radio' name = " + colName + " class=" + String(colName) +" value=2>Pinch<br>" +
                    "<input type='radio'name = " +colName + " class=" + String(colName) +" value=3>Crimp<br>"+
                    "<input type='radio' name = " +colName + " class=" + String(colName) +" value=4>Pocket<br>"+
                    "<input type='radio' name = " +colName + " class=" + String(colName) +" value=5>Undercling"+
                    // Submit button for form, close form
                    "<button type='submit'>Submit!</button></form>"+
                    // image of climbing hold in question with coordinates to position on moonboard
                    "<div><img src=labelled_imgs/" +String(holdPath) +" alt='selected hold'></div>");

                    var form = document.forms[form_name]
    
                    window.onload=function(){
                        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>


</body>
我怀疑事件监听器有问题。这可能很简单，但我欢迎任何有关此问题的替代解决方案的建议！这与仅将用户输入从表单发送到 google 工作表略有不同，因为每次呈现页面时表单内容都会更改。就上下文而言，这是自定义众包平台的一部分。谢谢你的帮助！

标签： javascriptjqueryajax

解决方案

问题：

  • 您window.onload每次都在循环中为每个表单重写函数。只有最后一个表单的提交事件将被禁用onload并提交到服务器。

  • 当您创建一个随机数字数组时，不能保证它是唯一的。如果两个表单最终具有相同的名称，则只会阻止第一个表单的提交事件。

解决方案：

  • 由于表单已经附加，直接在循环内为每个表单运行函数，无需编写window.onload 

    var form = document.forms[form_name]
form.addEventListener('submit', e => {
     e.preventDefault();
     fetch(scriptURL, { method: 'POST'.....

  • 做Idx独一无二的：

    idx = [...new Set(idx)]

推荐阅读