質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2229閲覧

LIFFでのプルダウン入力や時間入力の方法

sooryung

総合スコア22

LINE Messaging API

LINE Messaging APIは、メッセージの送信・返信ができるAPIです。Web APIを経由しアプリケーションサーバとLINEのAPIでやり取りが可能。複数のメッセージタイプや分かりやすいAPIリファレンスを持ち、グループチャットにも対応しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/01/04 05:01

LIFFを使ったアンケートフォームで、
プルダウンと時間入力のフォームの実装がうまくいきません。

LIFFを立ち上げ、以下のように入力すると
(すみません、項目名は気にしないでください)
イメージ説明

送信後、プルダウンと時間部分のみ、「undefind」となってしまいます。
イメージ説明

以下のようなhtmlを、github pagesを使って公開しています。

index.html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>筋トレ管理</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rossorigin="anonymous"> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> 10</head> 11<body> 12 13 <form class="w-75 mx-auto"> 14 <p class="mt-3">名前</p> 15 <div> 16 <input type="time" name="start-time" step="900"> 17 </div> 18 <p class="mt-3">腕立て</p> 19 <div> 20 <select name="example"> 21 <option value="選択肢1">選択肢1</option> 22 <option value="選択肢2">選択肢2</option> 23 <option value="選択肢3" selected>選択肢3</option> 24 <option value="選択肢4">選択肢4</option> 25 <option value="選択肢5">選択肢5</option> 26 </select> 27 </div> 28 <p class="mt-3">腹筋</p> 29 <div> 30 <input class="form-control w-100 mt-1" name="fukkin" required> 31 </div> 32 <p class="mt-3">背筋</p> 33 <div> 34 <input class="form-control w-100 mt-1" name="haikin" required> 35 </div> 36 <p class="mt-3">スクワット</p> 37 <div> 38 <input class="form-control w-100 mt-1" name="sukuwat" required> 39 </div> 40 <input type="submit" class="mt-4 btn btn-primary" value="送信"> 41 </form> 42 43 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 44 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 45 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script> 46 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script> 47 <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> 48 <script> 49 50 $(document).ready(function () { 51 const liffId = "1656776753-5ayjAoQQ"; 52 initializeLiff(liffId); 53 }) 54 55 function initializeLiff(liffId) { 56 liff.init({ 57 liffId: liffId 58 }).then(() => { 59 initializeApp(); 60 }).catch((err) => { 61 console.log('LIFF Initialization failed ', err); 62 }); 63 } 64 65 function sendText(text) { 66 liff.sendMessages([{ 67 'type': 'text', 68 'text': text 69 }]).then(function () { 70 liff.closeWindow(); 71 }).catch(function (error) { 72 window.alert('Failed to send message ' + error); 73 }); 74 } 75 76 const params = (new URL(document.location)).searchParams; 77 const key = params.get('key'); 78 79 $(function () { 80 $('form').submit(function () { 81 const name = $('input[name="name"]').val(); 82 const udetate = $('input[name="udetate"]').val(); 83 const fukkin = $('input[name="fukkin"]').val(); 84 const haikin = $('input[name="haikin"]').val(); 85 const sukuwat = $('input[name="sukuwat"]').val(); 86 const msg = `${name}\n${udetate}\n${fukkin}\n${haikin}\n${sukuwat}`; 87 sendText(msg); 88 return false; 89 }); 90 }); 91 92 </script>

調べても調べても出てこず・・・
どなたかご存知の方いらっしゃいましたら、ご教授ください!!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

すみません、下の<script>のところを全く触っていませんでした!

対象がポピュラーな割に検索しても出てこないときは、
そもそも解決しようとしている問題がズレているのかも、ということを強く疑うようにします。

一応、うまくいったコードは以下です。

index.html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>筋トレ管理</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rossorigin="anonymous"> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> 10</head> 11<body> 12 13 <form class="w-75 mx-auto"> 14 <p class="mt-3">名前</p> 15 <div> 16 <input type="time" class="form-control w-100 mt-1" name="name" placeholder="" required> 17 18 </div> 19 <p class="mt-3">腕立て2</p> 20 <div> 21 <select class="form-control w-100 mt-1" name="udetate" required> 22 <option value="選択肢1">選択肢1</option> 23 <option value="選択肢2">選択肢2</option> 24 <option value="選択肢3">選択肢3</option> 25 <option value="選択肢4">選択肢4</option> 26 <option value="選択肢5">選択肢5</option> 27 </select> 28 29 </div> 30 <p class="mt-3">腹筋</p> 31 <div> 32 <input class="form-control w-100 mt-1" name="fukkin" required> 33 </div> 34 <p class="mt-3">背筋</p> 35 <div> 36 <input class="form-control w-100 mt-1" name="haikin" required> 37 </div> 38 <p class="mt-3">スクワット</p> 39 <div> 40 <input class="form-control w-100 mt-1" name="sukuwat" required> 41 </div> 42 <input type="submit" class="mt-4 btn btn-primary" value="送信"> 43 </form> 44 45 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 46 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 47 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script> 48 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script> 49 <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> 50 <script> 51 52 $(document).ready(function () { 53 const liffId = "1656776753-5ayjAoQQ"; 54 initializeLiff(liffId); 55 }) 56 57 function initializeLiff(liffId) { 58 liff.init({ 59 liffId: liffId 60 }).then(() => { 61 initializeApp(); 62 }).catch((err) => { 63 console.log('LIFF Initialization failed ', err); 64 }); 65 } 66 67 function sendText(text) { 68 liff.sendMessages([{ 69 'type': 'text', 70 'text': text 71 }]).then(function () { 72 liff.closeWindow(); 73 }).catch(function (error) { 74 window.alert('Failed to send message ' + error); 75 }); 76 } 77 78 const params = (new URL(document.location)).searchParams; 79 const key = params.get('key'); 80 81 $(function () { 82 $('form').submit(function () { 83 const name = $('input[name="name"]').val(); 84 const udetate = $('select[name="udetate"]').val(); 85 const fukkin = $('input[name="fukkin"]').val(); 86 const haikin = $('input[name="haikin"]').val(); 87 const sukuwat = $('input[name="sukuwat"]').val(); 88 const msg = `${name}\n${udetate}\n${fukkin}\n${haikin}\n${sukuwat}`; 89 sendText(msg); 90 return false; 91 }); 92 }); 93 94 </script> 95 96</body> 97</html>

投稿2022/01/04 05:25

sooryung

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問