実現したいこと
動的htmlで入力フォームを作成しようと考えています(具体的には入力フォームを条件によって分岐させるようなものです。)。
そのためにGASコードで作成したhtmlを出力しようとしています。
発生している問題・分からないこと
<? output._ = formHTML ?>を用いて、htmlへ出力しています。サイト上ではうまく表示されるのですが、ボタンが効かなくなります。
原因を調べても上手く検索できず、この度質問させていただきました。
初歩的な質問であれば本当に申し訳ありませんが、何卒ご教示いただけますと幸いです。
よろしくお願いいたします。
エラーメッセージ
error
1無し(ボタンが反応しない)
該当のソースコード
code.gs
1var html3= ` 2 <input type="text" class="form-control" name="input" placeholder="input"> 3` 4 5function doGet() { 6 const template = HtmlService.createTemplateFromFile('test3'); 7 template.deployURL = ScriptApp.getService().getUrl(); 8 template.formHTML = html 9 const htmlOutput = template.evaluate(); 10 return htmlOutput; 11} 12 13function doPost(e){ 14 if(e.parameter.send) { 15 const template = HtmlService.createTemplateFromFile('test3'); 16 template.deployURL = ScriptApp.getService().getUrl(); 17 template.formHTML = html 18 const htmlOutput = template.evaluate(); 19 return htmlOutput; 20 } 21}
test3.html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <base target="_top"> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Bootstrap フォーム</title> 8 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> 9 </head> 10 11 <body> 12 <form method="POST" action="<?= deployURL ?>"> 13 <div class="form-group"> 14 <? output._ = formHTML ?> 15 </div> 16 <div class="form-group text-center"> 17 <button type="submit" class="btn" name="send" value="true">送信</button> 18 </div> 19 </form> 20 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> 21 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> 22 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 23 </body> 24 25</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
<? output._ = formHTML ?>を使わずに直接htmlへ記入するとうまく動作します。補足
特になし
回答1件
あなたの回答
tips
プレビュー