回答編集履歴
6
fix
test
CHANGED
|
@@ -111,6 +111,16 @@
|
|
|
111
111
|
alert("登録に失敗しました");
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
+
// メンバーIDからメンバー名を取得してインプットボックスmember-nameへ出力する関数
|
|
115
|
+
function outputMemberName(memberId) {
|
|
116
|
+
google.script.run.withSuccessHandler(function(memberName){
|
|
117
|
+
if (memberName) {
|
|
118
|
+
document.getElementById('member-name').value = memberName;
|
|
119
|
+
} else {
|
|
120
|
+
document.getElementById('member-name').value = '';
|
|
121
|
+
}
|
|
122
|
+
}).getMemberName(memberId);
|
|
123
|
+
}
|
|
114
124
|
|
|
115
125
|
</script>
|
|
116
126
|
</body>
|
5
え
test
CHANGED
|
@@ -111,10 +111,7 @@
|
|
|
111
111
|
alert("登録に失敗しました");
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
|
|
114
|
+
|
|
115
|
-
function outputMemberName(value) {
|
|
116
|
-
console.log(value)
|
|
117
|
-
}
|
|
118
115
|
</script>
|
|
119
116
|
</body>
|
|
120
117
|
|
4
ｗ
test
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
> 「type="button"をtype="submit"に変更してみたのですが、やはり登録ができてしまいます。」
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
onClickは使わず、addEventListener で submitイベントを登録して、submitされたときにaddBtnClickを実行するようにしてください。
|
|
37
37
|
|
|
38
38
|
```
|
|
39
39
|
<!DOCTYPE html>
|
3
ｗ
test
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
> 「type="button"をtype="submit"に変更してみたのですが、やはり登録ができてしまいます。」
|
|
35
35
|
|
|
36
|
-
addEventListener でsubmitイベントを登録して、submitされたときにaddBtnClickを実行するようにしてください。
|
|
36
|
+
unclickは使わず、addEventListener でsubmitイベントを登録して、submitされたときにaddBtnClickを実行するようにしてください。
|
|
37
37
|
|
|
38
38
|
```
|
|
39
39
|
<!DOCTYPE html>
|
2
追加
test
CHANGED
|
@@ -27,4 +27,98 @@
|
|
|
27
27
|
あと、2番目の「member-name」の方ですが、**required と readonly は両立できません**。
|
|
28
28
|
（コードが省略されていますが、おそらく member-id に対応する member-name を引っ張ってくるようにしているのでしょう。この部分はrequired を外して、空白だったら警告メッセージを出力するようにプログラムを組めばよいでしょう）
|
|
29
29
|
|
|
30
|
+
---
|
|
30
31
|
|
|
32
|
+
# 追加コメントに対して
|
|
33
|
+
|
|
34
|
+
> 「type="button"をtype="submit"に変更してみたのですが、やはり登録ができてしまいます。」
|
|
35
|
+
|
|
36
|
+
addEventListener でsubmitイベントを登録して、submitされたときにaddBtnClickを実行するようにしてください。
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
<!DOCTYPE html>
|
|
40
|
+
<html>
|
|
41
|
+
|
|
42
|
+
<body>
|
|
43
|
+
<div>
|
|
44
|
+
<form id="myform">
|
|
45
|
+
<div class="form">
|
|
46
|
+
<label for="member-id">
|
|
47
|
+
<span class="label">必須</span> 番号
|
|
48
|
+
</label>
|
|
49
|
+
<div class="form-text">
|
|
50
|
+
<input type="text" name="number" required="required" placeholder="半角数字" class="txt" id="member-id"
|
|
51
|
+
onchange="outputMemberName(this.value)">
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="form">
|
|
56
|
+
<label for="member-name">
|
|
57
|
+
<span class="label">必須</span> 名前</label>
|
|
58
|
+
<div class="form-text">
|
|
59
|
+
<input type="text" placeholder="名前" class="txt" readonly="true" id="member-name">
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="form">
|
|
64
|
+
<label for="han">
|
|
65
|
+
<span class="label">必須</span>班</label>
|
|
66
|
+
<div class="form-text">
|
|
67
|
+
<select name="han" class="txt" id="han" required>
|
|
68
|
+
<option value= "" disabled selected>-</option>
|
|
69
|
+
<option value="1">1</option>
|
|
70
|
+
<option value="2">2</option>
|
|
71
|
+
</select>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="wrap">
|
|
75
|
+
<input type="submit" class="submit" value="登録する">
|
|
76
|
+
<div class="/wrap">
|
|
77
|
+
</form>
|
|
78
|
+
<script>
|
|
79
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
80
|
+
const form = document.getElementById('myform');
|
|
81
|
+
form.addEventListener('submit', (event) => {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
addBtnClick();
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
function addBtnClick() {
|
|
88
|
+
// 実行してよいか確認する
|
|
89
|
+
const checkAddFlg = window.confirm('登録を実行してもよろしいですか？');
|
|
90
|
+
|
|
91
|
+
if (checkAddFlg) { //OKをクリックしたら…
|
|
92
|
+
// フォームの入力値を取得する
|
|
93
|
+
const memberId = document.getElementById('member-id').value;
|
|
94
|
+
const memberName = document.getElementById('member-name').value;
|
|
95
|
+
const han = document.getElementById('han').value;
|
|
96
|
+
google.script.run.withSuccessHandler(dataAddSuccess).withFailureHandler(dataAddFail).addData(memberId, memberName, han);
|
|
97
|
+
} else {
|
|
98
|
+
alert("登録をキャンセルしました");
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function dataAddSuccess() {
|
|
103
|
+
// アラートを表示し、入力フォームの値をリセットする
|
|
104
|
+
alert("登録に成功しました");
|
|
105
|
+
document.getElementById('member-id').value = '';
|
|
106
|
+
document.getElementById('member-name').value = '';
|
|
107
|
+
document.getElementById('han').value = '-';
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
function dataAddFail() {
|
|
111
|
+
alert("登録に失敗しました");
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// 質問に記載されていないのでダミー処理を実装
|
|
115
|
+
function outputMemberName(value) {
|
|
116
|
+
console.log(value)
|
|
117
|
+
}
|
|
118
|
+
</script>
|
|
119
|
+
</body>
|
|
120
|
+
|
|
121
|
+
</html>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
|
1
q
test
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
質問のコードについて、書き忘れか、それとも意図的に省略したのかは不明ですが、ボタンに関する部分が欠落しています。おそらく type="button"で書いていたのではないですか？
|
|
26
26
|
|
|
27
|
-
あと、2番目の「member-name」の方ですが、**require と readonly は両立できません**。
|
|
27
|
+
あと、2番目の「member-name」の方ですが、**required と readonly は両立できません**。
|
|
28
|
-
（コードが省略されていますが、おそらく me
|
|
28
|
+
（コードが省略されていますが、おそらく member-id に対応する member-name を引っ張ってくるようにしているのでしょう。この部分はrequired を外して、空白だったら警告メッセージを出力するようにプログラムを組めばよいでしょう）
|
|
29
29
|
|
|
30
30
|
|