質問編集履歴
4
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -229,26 +229,35 @@
|
|
|
229
229
|
|
|
230
230
|
```
|
|
231
231
|
```ここに言語を入力
|
|
232
|
-
|
|
232
|
+
const prevBtns = document.querySelectorAll(".btn-prev");
|
|
233
233
|
const nextBtns = document.querySelectorAll(".btn-next");
|
|
234
234
|
const progress = document.getElementById("progress");
|
|
235
235
|
const formSteps = document.querySelectorAll(".form-step");
|
|
236
236
|
|
|
237
237
|
let formStepsNum = 0;
|
|
238
238
|
|
|
239
|
-
nextBtns.forEach(btn =>{
|
|
239
|
+
nextBtns.forEach((btn) =>{
|
|
240
240
|
btn.addEventListener("click", () =>{
|
|
241
241
|
formStepsNum++;
|
|
242
|
-
|
|
242
|
+
updateFormSteps();
|
|
243
243
|
});
|
|
244
244
|
});
|
|
245
245
|
|
|
246
|
+
prevBtns.forEach((btn) =>{
|
|
247
|
+
btn.addEventListener("click", () =>{
|
|
248
|
+
formStepsNum--;
|
|
246
|
-
|
|
249
|
+
updateFormSteps();
|
|
250
|
+
});
|
|
251
|
+
});
|
|
247
252
|
|
|
253
|
+
|
|
254
|
+
function updateFormSteps(){
|
|
255
|
+
|
|
248
|
-
formSteps.forEach(formStep =>{
|
|
256
|
+
formSteps.forEach((formStep) =>{
|
|
249
257
|
formStep.classList.contains("form-step-active") &&
|
|
250
|
-
formStep.classList.remove("form-step-active")
|
|
258
|
+
formStep.classList.remove("form-step-active");
|
|
251
|
-
})
|
|
259
|
+
});
|
|
260
|
+
|
|
252
|
-
formSteps[formStepsNum].classList.add("form-step-active")
|
|
261
|
+
formSteps[formStepsNum].classList.add("form-step-active");
|
|
253
262
|
}
|
|
254
263
|
```
|
3
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
進捗状況のデザインが次のステップ状況に変更されてる分割でのやりかたでも可能でしょうか？
|
|
8
8
|
jsが苦手なんので、分割版で行きたいのですが、進捗状況がわかるデザインがある場合求められているのはMulti Step Form(１ページ完結)でしょうか？
|
|
9
9
|
|
|
10
|
+
HTMLすべて
|
|
11
|
+
https://codepen.io/boo-jp/pen/VwzPzKW
|
|
12
|
+
|
|
10
13
|
イメージ画像
|
|
11
14
|
|
|
12
15
|
|
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -105,6 +105,14 @@
|
|
|
105
105
|
</div>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
|
+
<div class="c-lead mt-small">
|
|
109
|
+
<button type="submit" class="btn-next genric-btn p-genric-btn--primary mt-small u-has-display-block">次へ<i class="btn-ph-caret-right ph-caret-right"></i>
|
|
110
|
+
</button>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="c-lead mt-small">
|
|
113
|
+
<button type="submit" disabled class="js-button c-genric-btn p-genric-btn--secondary u-default-border mt-small u-has-display-block">ここまでを保存する
|
|
114
|
+
</button>
|
|
115
|
+
</div>
|
|
108
116
|
|
|
109
117
|
<div class="form-step">
|
|
110
118
|
<div class="input-group">
|
|
@@ -117,14 +125,6 @@
|
|
|
117
125
|
</form>
|
|
118
126
|
|
|
119
127
|
|
|
120
|
-
<div class="c-lead mt-small">
|
|
121
|
-
<button type="submit" class="btn-next genric-btn p-genric-btn--primary mt-small u-has-display-block">次へ<i class="btn-ph-caret-right ph-caret-right"></i>
|
|
122
|
-
</button>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="c-lead mt-small">
|
|
125
|
-
<button type="submit" disabled class="js-button c-genric-btn p-genric-btn--secondary u-default-border mt-small u-has-display-block">ここまでを保存する
|
|
126
|
-
</button>
|
|
127
|
-
</div>
|
|
128
128
|
|
|
129
129
|
```
|
|
130
130
|
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
進捗状況のデザインが次のステップ状況に変更されてる分割でのやりかたでも可能でしょうか？
|
|
8
8
|
jsが苦手なんので、分割版で行きたいのですが、進捗状況がわかるデザインがある場合求められているのはMulti Step Form(１ページ完結)でしょうか？
|
|
9
9
|
|
|
10
|
+
イメージ画像
|
|
11
|
+
|
|
12
|
+
|
|
10
13
|
```ここに言語を入力
|
|
11
14
|
function cancelsubmit() {
|
|
12
15
|
if(document.querySelectorAll(".form-control").value === "") {
|