前提
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
<!DOCTYPE html> <html> <head> <base target="_top"> <!-- bootstrapを使う --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> </head> <body> <script> $(function(){ var frm_cnt = 0; $('#addbtn').on('click',function () { console.log('開始'); var original = $('#tbl1\\[' + frm_cnt + '\\]'); var originCnt = frm_cnt; // var originVal = $("input[name='sex\\[" + frm_cnt + "\\]']:checked").val(); frm_cnt++; original .clone() .hide() .insertAfter(original) .attr('id', 'tbl1[' + frm_cnt + ']') // クローンのid属性を変更。 //.find("input[type='radio'][checked]").prop('checked', true) //.end() // 一度適用する .find('input,select').each(function(idx, obj) { $(obj).attr({ id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') }); $(obj).val(''); }); // clone取得 var clone = $('#tbl1\\[' + frm_cnt + '\\]'); clone.children().show(); clone.slideDown('slow'); $("#row").val(frm_cnt); console.log(frm_cnt) }) // close object $('#delform').on('click', function() { var removeObj = $(this).parent(); removeObj.fadeOut('fast', function() { removeObj.remove(); // 番号振り直し frm_cnt = 0; $(".tbl1[id^='tbl1']").each(function(index, formObj) { if ($(formObj).attr('id') != 'tbl1[0]') { frm_cnt++; $(formObj) .attr('id', 'tbl1[' + frm_cnt + ']') // id属性を変更。 .find('input').each(function(idx, obj) { $(obj).attr({ id: $(obj).attr('id').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']'), name: $(obj).attr('name').replace(/\[[0-9]\]+$/, '[' + frm_cnt + ']') }); }); } }); }); }); }); </script> <br><br><br> <div id="myform"> <center><big style="font-weight: bold;"><big><big><big>TEST</big></big></big></big><br><br><br></center> <center> <main> <form class="" action="POSTするためのデプロイURL" method="post" id="form-id"> <b>名前 </b><input type="text" name="user" id="user" class="user" size="30" value=""></center> <!-- 導入箇所 --> <dl> <center> <p><b>本日の実績</b></p> <div hidden><input type="number" id="row" name="row"></div> <div class='scroll' id='tbl1[0]'> <table> <table class="form-table" > <tbody> <tr> <th>所属名</th> <td colspan="2"> <select name="classname[0]" id="classname[0]"> <option disabled selected>所属を選択して下さい。</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr> <th rowspan="2">時間</th> <td>開始時間</td> <td><input type="time" name="timestart[0]" id="timestart[0]" size="30" value="" required="required"> </td> </tr> <td>終了時間</td> <td><input type="time" name="timefin[0]" id="timefin[0]" size="30" value="" required="required"> </td> </tr> <tr> <th rowspan="2">講義詳細</th> <td>人数</td> <td><input type="number" name="human[0]" id="human[0]" size="60" value="0"></td> </tr> <td>コマ数</td> <td><input type="number" name="study[0]" id="study[0]" size="60" value="0"></td> </tr> </tbody> </table> <br><br> </div> <!-- Addボタン --> <div id="addbtn"> <span></span> <button type="button">フォーム追加</button> </div> <p><b>①今日の振り返り</b></p> <textarea name="today" cols="30" rows="3"> </textarea> <p><b>②翌日の目標</b></p> <textarea name="tomorrow" cols="30" rows="3"> </textarea> <BR> </div> <BR> </dl> <!-- 送信ボタン --> <center> <input type="submit" name="" value="送信する"> </center> </center> </form> </main> </body> </html>
GAS
function doGet(e){ const template = HtmlService.createTemplateFromFile('index'); const output = template.evaluate(); output.setTitle('TEST'); output.addMetaTag('viewport', 'width=device-width, initial-scale=1,user-scalable=no') return output; } //doGetでindex.htmlに入力された値を取得してスプシへ移行 function doPost(e){ let day = Utilities.formatDate(new Date(), 'JST', "yyyy/MM/dd"); let today = e.parameters.today.toString(); let tomorrow = e.parameters.tomorrow.toString(); let row = String(e.parameters.row);//可変店舗数-1 console.log("row="+row) let user ="TEST" const url ="スプレッドシートID"; const sh = SpreadsheetApp.openByUrl(url); const sheet = sh.getSheetByName(user); console.log(user) let formlastrow = sheet.getRange(sheet.getMaxRows(), 1).getNextDataCell(SpreadsheetApp.Direction.UP).getRow(); let textlastrow = sheet.getRange(sheet.getMaxRows(), 16).getNextDataCell(SpreadsheetApp.Direction.UP).getRow(); /* 振り返りデータスプレッドに差し込み */ var textarray = [[day,today,tomorrow]]; sheet.getRange(textlastrow+1,15, 1,3).setValues(textarray); /* 可変フォームによるデータの配列格納 */ //可変のinput内容を配列に格納 var classname= []; for(var i=0;i<row+2;i++){ if(e.parameter['classname['+i+']']===undefined) break; classname.push(e.parameter['classname['+i+']']); console.log(i) } console.log(e.parameter['classname[0]']) console.log(e.parameter['classname[1]']) console.log(classname) var timestart= []; for(var i=0;i<row+2;i++){ if(e.parameter['timestart['+i+']']===undefined) break; timestart.push(e.parameter['timestart['+i+']']); } console.log(e.parameter['timestart[0]']) console.log(e.parameter['timestart[1]']) console.log(timestart) var timefin= []; for(var i=0;i<row+2;i++){ if(e.parameter['timefin['+i+']']===undefined) break; timefin.push(e.parameter['timefin['+i+']']); } var human= []; for(var i=0;i<row+2;i++){ if(e.parameter['human['+i+']']===undefined) break; human.push(e.parameter['human['+i+']']); } var study= []; for(var i=0;i<row+2;i++){ if(e.parameter['study['+i+']']===undefined) break; study.push(e.parameter['study['+i+']']); } //配列を縦列に変更し、それぞれをスプレッドシートに縦列で記載 let classname1 = []; for(i=0;i<classname.length;i++){ console.log(classname.length) classname1[i]=[classname[i]]; } console.log(classname1) sheet.getRange(formlastrow+1,2,row+1, 1).setValues(classname1); let timestart1 = []; for(i=0;i<timestart.length;i++){ timestart1[i]=[timestart[i]]; } sheet.getRange(formlastrow+1,3,row+1, 1).setValues(timestart1); let timefin1 = []; for(i=0;i<timefin.length;i++){ timefin1[i]=[timefin[i]]; } sheet.getRange(formlastrow+1,4,row+1, 1).setValues(timefin1); let human1 = []; for(i=0;i<human.length;i++){ human1[i]=[human[i]]; } sheet.getRange(formlastrow+1,5,row+1, 1).setValues(human1); let study1 = []; for(i=0;i<study.length;i++){ study1[i]=[study[i]]; } sheet.getRange(formlastrow+1,6,row+1, 1).setValues(study1); }
補足情報
冗長なコードでお恥ずかしいですが、どこから間違えているのかわからずすべてのコードを載せさせていただきます。
まだ自分でも整理ができておらず無駄なコードが多数存在するかと思いますが、どうかご容赦ください。
勉強不足を恥じ入るばかりですが、お力をお借りしたく、よろしくお願いいたします。
0 コメント