回答編集履歴
5
コード改善
answer
CHANGED
@@ -174,6 +174,4 @@
|
|
174
174
|
</script>
|
175
175
|
|
176
176
|
</body>
|
177
|
-
|
178
|
-
</html>
|
179
177
|
```
|
4
コードの書き換え
answer
CHANGED
@@ -1,42 +1,5 @@
|
|
1
|
-
素のJavascriptで書いた一例です。
|
2
|
-
cssも追加してます。
|
3
|
-
jqueryを使いたい場合、わからないコードを検索したら比較的簡単に出来ると思います。
|
4
|
-
|
5
1
|
```html
|
6
|
-
<!DOCTYPE html>
|
7
|
-
<html lang="ja">
|
8
|
-
|
9
|
-
<head>
|
10
|
-
<meta charset="UTF-8">
|
11
|
-
<title>formrun.js - Confirm mode</title>
|
12
|
-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"
|
13
|
-
integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
|
14
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js"
|
15
|
-
crossorigin="anonymous"></script>
|
16
|
-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"
|
17
|
-
integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD"
|
18
|
-
crossorigin="anonymous"></script>
|
19
|
-
<script src="https://sdk.form.run/js/v2/formrun.js"></script>
|
20
|
-
|
21
|
-
<style>
|
22
|
-
.text-danger {
|
23
|
-
display: none;
|
24
|
-
}
|
25
|
-
|
26
|
-
.form-group {
|
27
|
-
display: none;
|
28
|
-
}
|
29
|
-
|
30
|
-
.form-group:nth-child(1),
|
31
|
-
.form-group:nth-child(2) {
|
32
|
-
display: block;
|
33
|
-
}
|
34
|
-
</style>
|
35
|
-
|
36
|
-
</head>
|
37
|
-
|
38
2
|
<body>
|
39
|
-
|
40
3
|
<div class="container">
|
41
4
|
<h1>formrun.js <small> - Confirm mode</small></h1>
|
42
5
|
|
@@ -97,19 +60,22 @@
|
|
97
60
|
<div class="form-group row">
|
98
61
|
<label class="form-control-label">停留所 <span class="haveto">必須</span></label>
|
99
62
|
<div class="form-control-label" data-formrun-hide-if-confirm>
|
100
|
-
<select class="form-control children" id="
|
63
|
+
<select class="form-control children" id="root1" name="停留所">
|
101
64
|
<option value="" selected="selected">停留所を選択してください</option>
|
102
65
|
<option value="交差点先" data-val="①ルート">交差点先</option>
|
103
66
|
<option value="ポルシェ前" data-val="①ルート">ポルシェ前</option>
|
104
67
|
<option value="南郵便局前" data-val="①ルート">南郵便局前</option>
|
68
|
+
</select>
|
69
|
+
<select class="form-control children" id="root2" name="停留所">
|
70
|
+
<option value="" selected="selected">停留所を選択してください</option>
|
105
71
|
<option value="動物病院前" data-val="②ルート">動物病院前</option>
|
106
72
|
<option value="マンション前" data-val="②ルート">マンション前</option>
|
107
73
|
<option value="幼稚園前" data-val="②ルート">幼稚園前</option>
|
108
74
|
</select>
|
109
75
|
<span class="text-danger" data-formrun-show-if-error="停留所">正しく入力してください</span>
|
110
76
|
</div>
|
111
|
-
<div class="cp_iptxt"
|
77
|
+
<div class="cp_iptxt">
|
112
|
-
<span
|
78
|
+
<span class="busStop"></span>
|
113
79
|
</div>
|
114
80
|
</div>
|
115
81
|
<div>
|
@@ -131,6 +97,9 @@
|
|
131
97
|
const must = document.getElementsByClassName("haveto");
|
132
98
|
const mustLen = must.length
|
133
99
|
const children2 = document.getElementsByClassName("children")[1];
|
100
|
+
const root1 = document.getElementById("root1");
|
101
|
+
const root2 = document.getElementById("root2");
|
102
|
+
const busStop = document.getElementsByClassName("busStop")[0];
|
134
103
|
|
135
104
|
select[1].addEventListener("change", () => {
|
136
105
|
if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
|
@@ -141,21 +110,18 @@
|
|
141
110
|
});
|
142
111
|
|
143
112
|
select[2].addEventListener("change", () => {
|
144
|
-
|
113
|
+
select[3].value = "";
|
145
|
-
|
114
|
+
select[4].value = "";
|
146
|
-
}
|
147
115
|
if (select[2].value == "①ルート") {
|
148
116
|
selectWrap[3].style.display = "block";
|
149
117
|
attention[2].style.display = "none";
|
150
|
-
|
118
|
+
root1.style.display = "block"
|
151
|
-
|
119
|
+
root2.style.display = "none"
|
152
|
-
}
|
153
120
|
} else if (select[2].value == "②ルート") {
|
154
121
|
selectWrap[3].style.display = "block";
|
155
122
|
attention[2].style.display = "none";
|
156
|
-
for (let i = 1; i < 4; i++) {
|
157
|
-
|
123
|
+
root1.style.display = "none"
|
158
|
-
|
124
|
+
root2.style.display = "block"
|
159
125
|
}
|
160
126
|
});
|
161
127
|
|
@@ -164,6 +130,16 @@
|
|
164
130
|
});
|
165
131
|
|
166
132
|
btn.addEventListener("click", (e) => {
|
133
|
+
for (let i = 0; i < mustLen; i++) {
|
134
|
+
must[i].style.display = "none";
|
135
|
+
}
|
136
|
+
|
137
|
+
if (root1.style.display == "block") {
|
138
|
+
busStop.innerText = root1.value;
|
139
|
+
} else {
|
140
|
+
busStop.innerText = root2.value;
|
141
|
+
}
|
142
|
+
|
167
143
|
if (select[1].value == "" && select[0].value == "") {
|
168
144
|
attention[0].style.display = "block";
|
169
145
|
attention[1].style.display = "block";
|
@@ -172,11 +148,8 @@
|
|
172
148
|
for (let i = 0; i < attentionLen; i++) {
|
173
149
|
attention[i].style.display = "none";
|
174
150
|
}
|
175
|
-
for (let i = 0; i < mustLen; i++) {
|
176
|
-
must[i].style.display = "none";
|
177
|
-
}
|
178
151
|
return true;
|
179
|
-
} else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "") {
|
152
|
+
} else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "" && select[4].value == "") {
|
180
153
|
setTimeout(() => {
|
181
154
|
btn.innerText = "未入力の項目があります"
|
182
155
|
}, 200);
|
@@ -192,6 +165,7 @@
|
|
192
165
|
const returnBtn = document.getElementsByClassName("btn-secondary")[0];
|
193
166
|
|
194
167
|
returnBtn.addEventListener("click", () => {
|
168
|
+
busStop.innerText = "";
|
195
169
|
for (let i = 0; i < mustLen; i++) {
|
196
170
|
must[i].style.display = "inline";
|
197
171
|
}
|
3
書式の改善
answer
CHANGED
@@ -97,7 +97,6 @@
|
|
97
97
|
<div class="form-group row">
|
98
98
|
<label class="form-control-label">停留所 <span class="haveto">必須</span></label>
|
99
99
|
<div class="form-control-label" data-formrun-hide-if-confirm>
|
100
|
-
|
101
100
|
<select class="form-control children" id="2" name="停留所">
|
102
101
|
<option value="" selected="selected">停留所を選択してください</option>
|
103
102
|
<option value="交差点先" data-val="①ルート">交差点先</option>
|
@@ -131,6 +130,7 @@
|
|
131
130
|
const attentionLen = attention.length;
|
132
131
|
const must = document.getElementsByClassName("haveto");
|
133
132
|
const mustLen = must.length
|
133
|
+
const children2 = document.getElementsByClassName("children")[1];
|
134
134
|
|
135
135
|
select[1].addEventListener("change", () => {
|
136
136
|
if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
|
@@ -141,8 +141,22 @@
|
|
141
141
|
});
|
142
142
|
|
143
143
|
select[2].addEventListener("change", () => {
|
144
|
+
for (let i = 1; i < 7; i++) {
|
145
|
+
children2.getElementsByTagName("option")[i].style.display = "block";
|
146
|
+
}
|
144
|
-
if (select[2].value == "①ルート"
|
147
|
+
if (select[2].value == "①ルート") {
|
148
|
+
selectWrap[3].style.display = "block";
|
149
|
+
attention[2].style.display = "none";
|
150
|
+
for (let i = 4; i < 7; i++) {
|
145
|
-
|
151
|
+
children2.getElementsByTagName("option")[i].style.display = "none";
|
152
|
+
}
|
153
|
+
} else if (select[2].value == "②ルート") {
|
154
|
+
selectWrap[3].style.display = "block";
|
155
|
+
attention[2].style.display = "none";
|
156
|
+
for (let i = 1; i < 4; i++) {
|
157
|
+
children2.getElementsByTagName("option")[i].style.display = "none";
|
158
|
+
}
|
159
|
+
}
|
146
160
|
});
|
147
161
|
|
148
162
|
select[3].addEventListener("change", () => {
|
2
書式の改善
answer
CHANGED
@@ -129,6 +129,8 @@
|
|
129
129
|
const btn = document.getElementsByClassName("btn-primary")[0];
|
130
130
|
const attention = document.getElementsByClassName("text-danger");
|
131
131
|
const attentionLen = attention.length;
|
132
|
+
const must = document.getElementsByClassName("haveto");
|
133
|
+
const mustLen = must.length
|
132
134
|
|
133
135
|
select[1].addEventListener("change", () => {
|
134
136
|
if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
|
@@ -153,7 +155,13 @@
|
|
153
155
|
attention[1].style.display = "block";
|
154
156
|
e.preventDefault();
|
155
157
|
} else if (select[1].value == "希望無し" && !(select[0].value == "")) {
|
158
|
+
for (let i = 0; i < attentionLen; i++) {
|
159
|
+
attention[i].style.display = "none";
|
160
|
+
}
|
161
|
+
for (let i = 0; i < mustLen; i++) {
|
156
|
-
|
162
|
+
must[i].style.display = "none";
|
163
|
+
}
|
164
|
+
return true;
|
157
165
|
} else if (select[0].value == "" || select[1].value == "" || select[2].value == "" || select[3].value == "") {
|
158
166
|
setTimeout(() => {
|
159
167
|
btn.innerText = "未入力の項目があります"
|
@@ -167,6 +175,14 @@
|
|
167
175
|
}
|
168
176
|
});
|
169
177
|
|
178
|
+
const returnBtn = document.getElementsByClassName("btn-secondary")[0];
|
179
|
+
|
180
|
+
returnBtn.addEventListener("click", () => {
|
181
|
+
for (let i = 0; i < mustLen; i++) {
|
182
|
+
must[i].style.display = "inline";
|
183
|
+
}
|
184
|
+
});
|
185
|
+
|
170
186
|
</script>
|
171
187
|
|
172
188
|
</body>
|
1
書式の改善
answer
CHANGED
@@ -1,7 +1,11 @@
|
|
1
1
|
素のJavascriptで書いた一例です。
|
2
2
|
cssも追加してます。
|
3
3
|
jqueryを使いたい場合、わからないコードを検索したら比較的簡単に出来ると思います。
|
4
|
+
|
4
5
|
```html
|
6
|
+
<!DOCTYPE html>
|
7
|
+
<html lang="ja">
|
8
|
+
|
5
9
|
<head>
|
6
10
|
<meta charset="UTF-8">
|
7
11
|
<title>formrun.js - Confirm mode</title>
|
@@ -128,13 +132,21 @@
|
|
128
132
|
|
129
133
|
select[1].addEventListener("change", () => {
|
130
134
|
if (select[1].value == "希望有り") selectWrap[2].style.display = "block";
|
131
|
-
if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = "";
|
135
|
+
if (select[1].value == "希望無し") selectWrap[2].style.display = "", selectWrap[3].style.display = "";
|
136
|
+
if (select[1].value == "希望有り" || select[1].value == "希望無し") {
|
137
|
+
attention[1].style.display = "none";
|
138
|
+
}
|
132
139
|
});
|
133
140
|
|
134
141
|
select[2].addEventListener("change", () => {
|
135
|
-
if (select[2].value == "①ルート" || select[2].value == "②ルート")
|
142
|
+
if (select[2].value == "①ルート" || select[2].value == "②ルート")
|
143
|
+
selectWrap[3].style.display = "block", attention[2].style.display = "none";
|
136
144
|
});
|
137
145
|
|
146
|
+
select[3].addEventListener("change", () => {
|
147
|
+
if (!(select[2].value == "")) attention[3].style.display = "none";
|
148
|
+
});
|
149
|
+
|
138
150
|
btn.addEventListener("click", (e) => {
|
139
151
|
if (select[1].value == "" && select[0].value == "") {
|
140
152
|
attention[0].style.display = "block";
|