-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (120 loc) · 5.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>登録</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css"
integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g=="
crossorigin="anonymous">
<style>
.help{
font-size: small;
color: gray;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-12 col-sm-4">
<label class="form-label" for="order">ジャンル</label>
<label class="help">※登録内容の種別(必須)</label>
<select id="order" class="form-select" onchange="viewChange();">
<option value="Japanese">語彙 / 漢字</option>
<option value="English">英単語</option>
</select>
</div>
<div class="col-12 col-sm-4">
<label class="form-label" for="word">単語</label>
<label class="help">※登録する単語(必須)</label>
<input type="text" id="word" class="form-control">
</div>
<div class="col-12 col-sm-4" id="type_japanese" style="display:block;">
<label class="form-label" for="type_jp">読み</label>
<label class="help">※登録する単語の読み方 ひらがなを推奨(必須)</label>
<input type="text" id="type_jp" class="form-control">
</div>
<div class="col-12 col-sm-4" id="type_english" style="display:none;">
<label class="form-label" for="type_en">種類</label>
<label class="help">※登録する単語の品詞 (必須)</label>
<select id="type_en" class="form-select">
<option disabled selected></option>
<option value="名">名詞</option>
<option value="代">代名詞</option>
<option value="自動">自動詞</option>
<option value="他動">他動詞</option>
<option value="形">形容詞</option>
<option value="副">副詞</option>
<option value="助">助動詞</option>
<option value="前">前置詞</option>
<option value="接">接続詞</option>
<option value="間">間投詞</option>
</select>
</div>
</div>
<div class="mt-2">
<label class="form-label" for="meaning">意味</label>
<label class="help">※登録する単語の意味(必須)</label>
<textarea id="meaning" class="form-control"></textarea>
</div>
<div class="mt-2">
<label class="form-label" for="remark">備考</label>
<label class="help">※その他特記事項</label>
<textarea id="remark" class="form-control"></textarea>
</div>
<button id="send" class="btn btn-primary mt-3" onclick="send()">送信</button>
<div class="mt-2" style="padding: 10px; border: 5px double #333333;">
<p>登録が完了するまで、少々の時間を要します。</p>
<p>登録が完了する前に送信ボタンを連打すると、登録が重複する可能性があります。</p>
<p>送信ボタンを連打せず、登録の成否通知が表示されるまでお待ちください。</p>
</div>
</div>
<script>
function viewChange() {
const order = document.getElementById('order').value;
if (order == 'Japanese') {
document.getElementById('type_japanese').style.display = "block";
document.getElementById('type_english').style.display = "none";
} else if (order == 'English') {
document.getElementById('type_japanese').style.display = "none";
document.getElementById('type_english').style.display = "block";
}
}
window.onload = viewChange;
</script>
<script>
async function send() {
const order = document.getElementById('order').value;
let data = {
order: order,
word: document.getElementById('word').value,
meaning: document.getElementById('meaning').value,
remark: document.getElementById('remark').value,
address: navigator.userAgent
};
if (order == "Japanese") {
data.type = document.getElementById('type_jp').value;
} else if (order == "English") {
data.type = document.getElementById('type_en').value;
}
if (!data.order || !data.word || !data.type || !data.meaning) {
alert('送信に失敗しました。入力欄を埋めてください。');
return;
}
try {
const url = "https://script.google.com/macros/s/AKfycbx3CLCfY-EckzyVSMgjvMjO01cl4srANMDUMXSP9w-Ef2C86aHMA5rsnNiJ0NDL-7jkvw/exec" + "?order=" + data.order + "&word=" + data.word + "&type=" + data.type + "&meaning=" + data.meaning + "&remark=" + data.remark + "&address=" + data.address;
const res = await fetch(url, { method: 'GET' });
if (res.ok) {
alert('送信しました。');
} else {
alert('送信に失敗しました。');
}
} catch (e) {
alert('送信に失敗しました。');
}
}
</script>
</body>
</html>