Q&A前提
jQueryは最近勉強をはじめたので、基礎的な知識が抜けておりましたら申し訳ありません。
表題の通り、GASでWEBフォームを作成し、Jqueryを用いてWEBフォームを任意の数追加するスクリプトを作成しました。
想定通りWEBフォームは任意の数追加され、nameやidの要素の書き換えも完了しております。
しかしフォーム内容を取得しスプレッドシートに転記する際、任意に追加したフォームのinput内容を取得することができません。
（もともとあったフォームの内容は問題なく取得できます。）
実現したいこと
- 任意の数だけフォームを追加していきたい。
- 追加したフォームの内容に記載されたinputデータをスプレッドシートに転記したい。
発生している問題・エラーメッセージ
2022/07/02 17:10:37 デバッグ row=1 2022/07/02 17:10:37 デバッグ A (console.log(e.parameter['classname[0]'])の結果) 2022/07/02 17:10:37 デバッグ undefined （console.log(e.parameter['classname[1]'])の結果） 2022/07/02 17:10:37 デバッグ [ 'A' ] （console.log(classname)の結果） 2022/07/02 17:10:37 デバッグ 17:10 （console.log(e.parameter['timestart[0]'])の結果） 2022/07/02 17:10:37 デバッグ undefined （console.log(e.parameter['timestart[1]'])の結果） 2022/07/02 17:10:37 デバッグ [ '17:10' ] （console.log(timestart)の結果） 2022/07/02 17:10:37 デバッグ 1 （console.log(classname.length)の結果） 2022/07/02 17:10:37 デバッグ [ [ 'A' ] ] （console.log(classname1)の結果） 2022/07/02 17:10:37 エラー Exception: データの行数が範囲の行数と一致しません。データは 1 行ですが、範囲は 11.行です。 at doPost(コード:87:44)
該当のソースコード
HTML&Jquery
1 2<!DOCTYPE html> 3<html> 4 <head> 5 <base target="_top"> 6 <!-- bootstrapを使う --> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 8 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 9 10 11 </head> 12 <body> 13 14 <script> 15 $(function(){ 16 var frm_cnt = 0; 17 $('#addbtn').on('click',function () { 18 console.log('開始'); 19 var original = $('#tbl1\\[' + frm_cnt + '\\]'); 20 21 var originCnt = frm_cnt; 22 23 // var originVal = $("input[name='sex\\[" + frm_cnt + "\\]']:checked").val(); 24 25 frm_cnt++; 26 original 27 .clone() 28 .hide() 29 .insertAfter(original) 30 .attr('id', 'tbl1[' + frm_cnt + ']') // クローンのid属性を変更。 31 //.find("input[type='radio'][checked]").prop('checked', true) 32 //.end() // 一度適用する 33 .find('input,select').each(function(idx, obj) { 34 $(obj).attr({ 35 id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), 36 name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') 37 }); 38 $(obj).val(''); 39 }); 40 41 // clone取得 42 var clone = $('#tbl1\\[' + frm_cnt + '\\]'); 43 clone.children().show(); 44 clone.slideDown('slow'); 45 46 $("#row").val(frm_cnt); 47 console.log(frm_cnt) 48 49 }) 50 51 // close object 52 $('#delform').on('click', function() { 53 var removeObj = $(this).parent(); 54 removeObj.fadeOut('fast', function() { 55 removeObj.remove(); 56 // 番号振り直し 57 frm_cnt = 0; 58 $(".tbl1[id^='tbl1']").each(function(index, formObj) { 59 if ($(formObj).attr('id') != 'tbl1[0]') { 60 frm_cnt++; 61 $(formObj) 62 .attr('id', 'tbl1[' + frm_cnt + ']') // id属性を変更。 63 .find('input').each(function(idx, obj) { 64 $(obj).attr({ 65 id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), 66 name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') 67 }); 68 }); 69 } 70 }); 71 }); 72 }); 73 74}); 75 </script> 76 <br><br><br> 77 <div id="myform"> 78 79<center><big style="font-weight: bold;"><big><big><big>TEST</big></big></big></big><br><br><br></center> 80 81 <center> 82 <main> 83 <form class="" action="POSTするためのデプロイURL" method="post" id="form-id"> 84 <b>名前 </b><input type="text" name="user" id="user" class="user" size="30" value=""></center> 85 86<!-- 導入箇所 --> 87<dl> 88<center> 89<p><b>本日の実績</b></p> 90<div hidden><input type="number" id="row" name="row"></div> 91<div class='scroll' id='tbl1[0]'> 92 <table> 93 <table class="form-table" > 94 <tbody> 95 <tr> 96 <th>所属名</th> 97 <td colspan="2"> 98 <select name="classname[0]" id="classname[0]"> 99 <option disabled selected>所属を選択して下さい。</option> 100 <option value="A">A</option> 101 <option value="B">B</option> 102 <option value="C">C</option> 103 </select> 104 105 </td> 106 </tr> 107 108 <tr> 109 <th rowspan="2">時間</th> 110 <td>開始時間</td> 111 <td><input type="time" name="timestart[0]" id="timestart[0]" size="30" value="" required="required"> 112 </td> 113 </tr> 114 <td>終了時間</td> 115 <td><input type="time" name="timefin[0]" id="timefin[0]" size="30" value="" required="required"> 116 </td> 117 </tr> 118 119 <tr> 120 <th rowspan="2">講義詳細</th> 121 <td>人数</td> 122 <td><input type="number" name="human[0]" id="human[0]" size="60" value="0"></td> 123 </tr> 124 <td>コマ数</td> 125 <td><input type="number" name="study[0]" id="study[0]" size="60" value="0"></td> 126 </tr> 127 </tbody> 128 </table> 129 <br><br> 130 </div> 131 <!-- Addボタン --> 132 <div id="addbtn"> 133 <span></span> 134 <button type="button">フォーム追加</button> 135 </div> 136 137 138<p><b>①今日の振り返り</b></p> 139<textarea name="today" cols="30" rows="3"> 140</textarea> 141 142<p><b>②翌日の目標</b></p> 143<textarea name="tomorrow" cols="30" rows="3"> 144</textarea> 145<BR> 146 </div> 147<BR> 148 </dl> 149 <!-- 送信ボタン --> 150 <center> 151 152 <input type="submit" name="" value="送信する"> 153 154 </center> 155</center> 156 </form> 157 158 159 </main> 160 </body> 161</html>
GAS
1function doGet(e){ 2 const template = HtmlService.createTemplateFromFile('index'); 3 4 const output = template.evaluate(); 5 output.setTitle('TEST'); 6 output.addMetaTag('viewport', 'width=device-width, initial-scale=1,user-scalable=no') 7 return output; 8 9} 10 11 12//doGetでindex.htmlに入力された値を取得してスプシへ移行 13function doPost(e){ 14 let day = Utilities.formatDate(new Date(), 'JST', "yyyy/MM/dd"); 15 let today = e.parameters.today.toString(); 16 let tomorrow = e.parameters.tomorrow.toString(); 17 let row = String(e.parameters.row);//可変店舗数-1 18 console.log("row="+row) 19 let user ="TEST" 20 21 22 const url ="スプレッドシートID"; 23 const sh = SpreadsheetApp.openByUrl(url); 24 const sheet = sh.getSheetByName(user); 25 console.log(user) 26 let formlastrow = sheet.getRange(sheet.getMaxRows(), 1).getNextDataCell(SpreadsheetApp.Direction.UP).getRow(); 27 let textlastrow = sheet.getRange(sheet.getMaxRows(), 16).getNextDataCell(SpreadsheetApp.Direction.UP).getRow(); 28 29 30 31/* 振り返りデータスプレッドに差し込み */ 32 var textarray = [[day,today,tomorrow]]; 33 sheet.getRange(textlastrow+1,15, 1,3).setValues(textarray); 34 35 36 /* 可変フォームによるデータの配列格納 */ 37//可変のinput内容を配列に格納 38 var classname= []; 39 for(var i=0;i<row+2;i++){ 40 if(e.parameter['classname['+i+']']===undefined) 41 break; 42 classname.push(e.parameter['classname['+i+']']); 43 console.log(i) 44} 45console.log(e.parameter['classname[0]']) 46console.log(e.parameter['classname[1]']) 47console.log(classname) 48 49 50 var timestart= []; 51 for(var i=0;i<row+2;i++){ 52 if(e.parameter['timestart['+i+']']===undefined) 53 break; 54 timestart.push(e.parameter['timestart['+i+']']); 55} 56console.log(e.parameter['timestart[0]']) 57console.log(e.parameter['timestart[1]']) 58console.log(timestart) 59 60 var timefin= []; 61 for(var i=0;i<row+2;i++){ 62 if(e.parameter['timefin['+i+']']===undefined) 63 break; 64 timefin.push(e.parameter['timefin['+i+']']); 65} 66 67var human= []; 68 for(var i=0;i<row+2;i++){ 69 if(e.parameter['human['+i+']']===undefined) 70 break; 71 human.push(e.parameter['human['+i+']']); 72} 73var study= []; 74 for(var i=0;i<row+2;i++){ 75 if(e.parameter['study['+i+']']===undefined) 76 break; 77 study.push(e.parameter['study['+i+']']); 78} 79 80//配列を縦列に変更し、それぞれをスプレッドシートに縦列で記載 81 let classname1 = []; 82 for(i=0;i<classname.length;i++){ 83 console.log(classname.length) 84 classname1[i]=[classname[i]]; 85 } 86 console.log(classname1) 87 88 sheet.getRange(formlastrow+1,2,row+1, 1).setValues(classname1); 89 90 let timestart1 = []; 91 for(i=0;i<timestart.length;i++){ 92 timestart1[i]=[timestart[i]]; 93 } 94 sheet.getRange(formlastrow+1,3,row+1, 1).setValues(timestart1); 95 96 let timefin1 = []; 97 for(i=0;i<timefin.length;i++){ 98 timefin1[i]=[timefin[i]]; 99 } 100 sheet.getRange(formlastrow+1,4,row+1, 1).setValues(timefin1); 101 102 103 let human1 = []; 104 for(i=0;i<human.length;i++){ 105 human1[i]=[human[i]]; 106 } 107 sheet.getRange(formlastrow+1,5,row+1, 1).setValues(human1); 108 109 let study1 = []; 110 for(i=0;i<study.length;i++){ 111 study1[i]=[study[i]]; 112 } 113 sheet.getRange(formlastrow+1,6,row+1, 1).setValues(study1); 114} 115 116
補足情報
冗長なコードでお恥ずかしいですが、どこから間違えているのかわからずすべてのコードを載せさせていただきます。
まだ自分でも整理ができておらず無駄なコードが多数存在するかと思いますが、どうかご容赦ください。
勉強不足を恥じ入るばかりですが、お力をお借りしたく、よろしくお願いいたします。
回答1件
0
自己解決
自己解決しました。
HTMLの閉じタグに問題があり、formタグが正常に閉じられていたなったことが原因でした。
正しいHTMLコードは下記の通りとなります。
HTML&jQuery
1 2<!DOCTYPE html> 3<html> 4 <head> 5 <base target="_top"> 6 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 7 8 </head> 9 <body> 10 11 <script> 12 13 $(function(){ 14 var frm_cnt = 0; 15 $(document).on('click','#addbtn',function () { 16 console.log('開始'); 17 var original = $('#tbl1\\[' + frm_cnt + '\\]'); 18 19 var originCnt = frm_cnt; 20 21 frm_cnt++; 22 original 23 .clone() 24 .hide() 25 .insertAfter(original) 26 .attr('id', 'tbl1[' + frm_cnt + ']') // クローンのid属性を変更。 27 .find('input,select').each(function(idx, obj) { 28 $(obj).attr({ 29 id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), 30 name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') 31 }); 32 $(obj).val(''); 33 }); 34 35 // clone取得 36 var clone = $('#tbl1\\[' + frm_cnt + '\\]'); 37 clone.children().show(); 38 clone.slideDown('slow'); 39 40 $("#row").val(frm_cnt); 41 console.log(frm_cnt) 42 }) 43 44 // close object 45 $(document).on('click','#delform', function() { 46 var removeObj = $(this).parent(); 47 removeObj.fadeOut('fast', function() { 48 removeObj.remove(); 49 // 番号振り直し 50 frm_cnt = 0; 51 $(".tbl1[id^='tbl1']").each(function(index, formObj) { 52 if ($(formObj).attr('id') != 'tbl1[0]') { 53 frm_cnt++; 54 $(formObj) 55 .attr('id', 'tbl1[' + frm_cnt + ']') // id属性を変更。 56 .find('input').each(function(idx, obj) { 57 $(obj).attr({ 58 id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), 59 name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') 60 }); 61 }); 62 } 63 }); 64 }); 65 }); 66 }); 67 68 </script> 69 <center> 70 <big style="font-weight: bold;"><big><big><big>TEST</big></big></big></big><br><br><br> 71 </center> 72 73 <center> 74 <main> 75 <div> 76 <form class="" action="スクリプトURL" method="post" id="form-id"> 77 <center> 78 <b>名前 </b><input type="text" name="user" id="user" class="user" size="30" value=""> 79 </center> 80 <!-- 導入箇所 --> 81 <center> 82 <p> 83 <b>本日の実績</b> 84 </p> 85 <div hidden> 86 <input type="number" id="row" name="row"> 87 </div> 88 89 <div class='scroll' id='tbl1[0]'> 90 <table class="form-table" > 91 <tbody> 92 <tr> 93 <th>所属名</th> 94 <td colspan="2"> 95 <select name="classname[0]" id="classname[0]"> 96 <option disabled selected>所属を選択して下さい。</option> 97 <option value="A">A</option> 98 <option value="B">B</option> 99 <option value="C">C</option> 100 </select> 101 </td> 102 </tr> 103 <tr> 104 <th rowspan="2">時間</th> 105 <td>開始時間</td> 106 <td> 107 <input type="time" name="timestart[0]" id="timestart[0]" size="30" value="" required="required"> 108 </td> 109 </tr> 110 <td>終了時間</td> 111 <td> 112 <input type="time" name="timefin[0]" id="timefin[0]" size="30" value="" required="required"> 113 </td> 114 </tr> 115 116 <tr> 117 <th rowspan="2">講義詳細</th> 118 <td>人数</td> 119 <td> 120 <input type="number" name="human[0]" id="human[0]" size="60" value="0"> 121 </td> 122 </tr> 123 <tr> 124 <td>コマ数</td> 125 <td><input type="number" name="study[0]" id="study[0]" size="60" value="0"></td> 126 </tr> 127 </tbody> 128 </table> 129 <br><br> 130 </div> 131 132 <!-- Addボタン --> 133 <div id="addbtn"> 134 <span></span> 135 <button type="button">フォーム追加</button> 136 </div> 137 138 <p><b>①今日の振り返り</b></p> 139 <textarea name="today" cols="30" rows="3"></textarea> 140 141 <p><b>②翌日の目標</b></p> 142 <textarea name="tomorrow" cols="30" rows="3"></textarea> 143 <BR> 144 145 <!-- 送信ボタン --> 146 <center> 147 <input type="submit" name="" value="送信する"> 148 <div id="progress"></div><br><br> 149 </center> 150 </form> 151 </div> 152 </main> 153 </center> 154 155</body> 156</html> 157
当たり前ですが、コードを書く際はきちんと整理して書かないと今回のような初歩的なミスにつながるのだと痛感しました。
閲覧して下さった方、ありがとうございます！
投稿2022/07/04 01:32
総合スコア29
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。