动态 html 表单数据 AJAX 重定向到谷歌表错误
[英]Dynamic html form data AJAX redirect to google sheets bug
问题描述
我正在努力将表单数据从动态用户表单发送到谷歌表格页面。 有 140 个潜在形式的语料库，随机向用户显示 20 个。 我在控制台中没有收到任何错误，但没有填充谷歌表。 我知道工作表 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>
2 个解决方案
解决方案1
1 2019-04-21 18:41:31
问题：
您每次在每个表单的循环中都重写
window.onload函数。 只有最后一个表单的提交事件才会在onload时被禁用并提交到服务器。当您创建一个随机的数字数组时，不能保证它是唯一的。 如果两个表单的名称相同，则只会阻止第一个表单的提交事件。
解决方案：
由于已经追加了表单，直接在循环内为每个表单运行该函数，无需编写
window.onloadvar form = document.forms[form_name] form.addEventListener('submit', e => { e.preventDefault(); fetch(scriptURL, { method: 'POST'.....使
Idx独一无二：idx = [...new Set(idx)]
解决方案2
0 2019-04-21 18:25:29
我能够通过更改页面的架构来解决这个问题。 我没有为每个分类任务使用许多不同的表单，而是使用一个作为一个整体提交的表单。
我已经在下面发布了新代码。 请随时联系澄清！
<!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_submit1"> <form id="form_submit" , name="submit_to_sheets"> </form> </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',...,'99.png'] var numWords = ["one", "two",...,"one_hundred_and_fifty"] var numWordDict = { 1: 'one', 2: 'two', ... 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] // 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 "<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" + // image of climbing hold in question with coordinates to position on moonboard "<div><img src=labelled_imgs/" + String(holdPath) + " alt='selected hold'></div>"); } // prepend form begining to html outside of for loop // append end of form to html outside of for loop }); $("#form_submit").append("<button type='submit'>Submit!</button>"); </script> <script> const form = document.forms["submit_to_sheets"] const scriptURL = 'https://script.google.com/macros/s/AKfycbyhMLuTGNkaNOxeNCOx_t1ERThZT8VEYDcMmiQhj773kIrUuRA/exec' console.log(form) console.log("loop") 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> </html>
如何使用外部 html 表单将文件上传到谷歌驱动器并将其他表单数据保存到谷歌表格？
[英]How do I make use of an external html form to upload file to google drive and save other form data to google sheets?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.