js　フォームを３ステップにした場合の戻り方

cssここに言語を入力
1html, body{
2  width: 100%;
3  height: 100%;
4  margin: 0;
5  padding: 0;
6  font-family: 'Open Sans', sans-serif;
7  background-color: #3498db;
8}
9
10h1, h2, h3, h4, h5 ,h6{
11  font-weight: 200;
12}
13
14a{
15  text-decoration: none;
16}
17
18p, li, a{
19  font-size: 14px;
20}
21
22fieldset{
23  margin: 0;
24  padding: 0;
25  border: none;
26}
27
28.left-b a{
29  position: absolute;
30left: 20px;
31top:12px;
32  font-size: 18px;
33
34  color: white;
35}
36
37
38/* GRID */
39
40.twelve { width: 100%; }
41.eleven { width: 91.53%; }
42.ten { width: 83.06%; }
43.nine { width: 74.6%; }
44.eight { width: 66.13%; }
45.seven { width: 57.66%; }
46.six { width: 49.2%; }
47.five { width: 40.73%; }
48.four { width: 32.26%; }
49.three { width: 23.8%; }
50.two { width: 15.33%; }
51.one { width: 6.866%; }
52
53/* COLUMNS */
54
55.col {
56    display:block;
57  width: 100%;
58  padding-bottom: 30px;
59
60}
61
62.col:first-of-type {
63  margin-left: 0;
64}
65
66.container{
67  width: 100%;
68  max-width: 700px;
69  margin: 0 auto;
70  position: relative;
71}
72
73.row{
74  padding: 20px 0;
75}
76
77/* CLEARFIX */
78
79.cf:before,
80.cf:after {
81    content: " ";
82    display: table;
83}
84
85.cf:after {
86    clear: both;
87}
88
89.cf {
90    *zoom: 1;
91}
92
93.wrapper{
94  width: 100%;
95  margin: 30px 0;
96}
97
98/* STEPS */
99
100.steps{
101  list-style-type: none;
102  margin: 0;
103  padding: 0;
104  background-color: #fff;
105  text-align: center;
106}
107
108
109.steps li{
110  display: inline-block;
111  margin: 20px;
112  color: #ccc;
113  padding-bottom: 5px;
114}
115
116.steps li.is-active{
117  border-bottom: 1px solid #3498db;
118  color: #3498db;
119}
120
121/* FORM */
122
123.form-wrapper .section{
124  padding: 0px 20px 180px 20px;
125  -webkit-box-sizing: border-box;
126  -moz-box-sizing: border-box;
127  box-sizing: border-box;
128  background-color: #fff;
129  opacity: 0;
130  -webkit-transform: scale(1, 0);
131  -ms-transform: scale(1, 0);
132  -o-transform: scale(1, 0);
133  transform: scale(1, 0);
134  -webkit-transform-origin: top center;
135  -moz-transform-origin: top center;
136  -ms-transform-origin: top center;
137  -o-transform-origin: top center;
138  transform-origin: top center;
139  -webkit-transition: all 0.5s ease-in-out;
140  -o-transition: all 0.5s ease-in-out;
141  transition: all 0.5s ease-in-out;
142  text-align: center;
143  position: absolute;
144  width: 100%;
145  min-height: 300px
146}
147
148.form-wrapper .section h3{
149  margin-bottom: 30px;
150}
151
152.form-wrapper .section.is-active{
153  opacity: 1;
154  -webkit-transform: scale(1, 1);
155  -ms-transform: scale(1, 1);
156  -o-transform: scale(1, 1);
157  transform: scale(1, 1);
158}
159
160.form-wrapper .button, .form-wrapper .submit{
161  background-color: #3498db;
162  display: inline-block;
163  padding: 10px 40px;
164  color: #fff;
165  cursor: pointer;
166  font-size: 14px !important;
167  font-family: 'Open Sans', sans-serif !important;
168  position: absolute;
169  right: 20px;
170  bottom: 20px;
171}
172
173.form-wrapper .submit{
174  border: none;
175  outline: none;
176  -webkit-box-sizing: content-box;
177  -moz-box-sizing: content-box;
178  box-sizing: content-box;
179  -webkit-appearance: none;
180  -moz-appearance: none;
181  appearance: none;
182}
183
184.form-wrapper input[type="text"],
185.form-wrapper input[type="password"]{
186  display: block;
187  padding: 10px;
188  margin: 30px auto;
189  background-color: #f1f1f1;
190  border: none;
191  width: 70%;
192  outline: none;
193  font-size: 14px !important;
194  font-family: 'Open Sans', sans-serif !important;
195}
196
197.form-wrapper input[type="radio"]{
198  display: none;
199}
200
201.form-wrapper input[type="radio"] + label{
202  display: block;
203  border: 1px solid #ccc;
204  width: 100%;
205  max-width: 100%;
206  padding: 10px;
207  -webkit-box-sizing: border-box;
208  -moz-box-sizing: border-box;
209  box-sizing: border-box;
210  cursor: pointer;
211  position: relative;
212}
213
214.form-wrapper input[type="radio"] + label:before{
215  content: "✔";
216  position: absolute;
217  right: -10px;
218  top: -10px;
219  width: 30px;
220  height: 30px;
221  line-height: 30px;
222  border-radius: 100%;
223  background-color: #3498db;
224  color: #fff;
225  display: none;
226}
227
228.form-wrapper input[type="radio"]:checked + label:before{
229  display: block;
230}
231
232.form-wrapper input[type="radio"] + label h4{
233  margin: 15px;
234  color: #ccc;
235}
236
237.form-wrapper input[type="radio"]:checked + label{
238  border: 1px solid #3498db;
239}
240
241.form-wrapper input[type="radio"]:checked + label h4{
242  color: #3498db;
243}
244
245.is-active input{
246  padding-bottom: 10px;
247}
248.post-form{
249  display: none;
250}
251.post-form p{
252  padding-bottom: 1px;
253}
254.post p{
255  font-size: 12px;
256  padding-top: 15px;
257  width: 80%;
258
259}
260.post-form-block{
261  display: block;
262}
263
264.post-namber{
265  width:40%;
266  font-size: 18px;
267  height: 30px;
268}
269.uther-address{
270  width:80%;
271  font-size: 18px;
272  height: 30px;
273}
274.post:last-child span{
275  color: red;
276  font-size: 26px;
277}
278.post:first-child{
279margin-bottom: 25px;
280}
281.post:last-child p{
282padding-top:20px;
283font-size: 16px;
284}
285
286
287.city-list{
288display: none;
289}

jsここに言語を入力
1$(function(){
2$(document).ready(function(){
3$(".form-wrapper .button").click(function(){
4var button = $(this);
5var currentSection = button.parents(".section");
6var currentSectionIndex = currentSection.index();
7var headerSection = $('.steps li').eq(currentSectionIndex);
8      currentSection.removeClass("is-active").next().addClass("is-active");
9      headerSection.removeClass("is-active").next().addClass("is-active");
10
11     $(".form-wrapper").submit(function(e) {
12       e.preventDefault();
13      });
14    if(currentSectionIndex === 3){
15       $(document).find(".form-wrapper .section").first().addClass("is-active");
16      $(document).find(".steps li").first().addClass("is-active");
17      }
18
19});
20
21
22  });
23        $('.label-first').click(function(){
24          $('.city-list-block').removeClass('city-list');
25          $('.post-form').removeClass("post-form-block");
26        });
27
28        $('.label-second').click(function(){
29        $('.city-list-block').addClass('city-list');
30          $('.post-form').addClass('post-form-block');
31        });
32  });

htmlここに言語を入力
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>フォーム</title>
7
8    <link rel="stylesheet" href="aaa.css">
9    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
10 <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
11 <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
12  </head>
13  <body>
14<div class='left-b' id="backing">
15<a href='#' class="backto">戻る</a>
16</div>
17   <div class="container">
18    <div class="wrapper">
19
20      <ul class="steps">
21        <li class="is-active">Step 1</li>
22        <li>Step 2</li>
23        <li>Step 3</li>
24      </ul>
25
26      <form class="form-wrapper">
27
28        <fieldset class="section is-active" name="sec">
29          <h3>あ</h3>
30          <div class="row cf">
31            <div class="four col">
32              <input type="radio" name="r1" id="r1" checked>
33              <label for="r1" class="label-first">
34                <h4>い</h4>
35              </label>
36            </div>
37            <div class="four col">
38              <input type="radio" name="r1" id="r2">
39              <label for="r2" class="label-second">
40                <h4>う</h4>
41              </label>
42            </div>
43          </div>
44          <div class="button">Next</div>
45        </fieldset>
46
47        <fieldset class="section" name="sec">
48          <h3>個人情報</h3>
49          <input type="text" name="name" id="name" placeholder="名前">
50          <input  type="text" name="email" id="name1" placeholder="ふりがな">
51            <input  type="text" name="email" id="mumber" placeholder="電話番号">
52              <input  type="text" name="email" id="email" placeholder="メールアドレス">
53
54
55              <!-- ▼郵便番号入力フィールド(7桁) -->
56            <div class="post-form">
57              <div class="post mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
58                <input class="mdl-textfield__input " name="zip11" type="text" placeholder="〒郵便番号で自動入力..." maxlength="7" pattern="^[0-9-]+$" id="sample4" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');" >
59            </div>
60
61            <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
62            <div class="post">
63            <input class="uther-address mdl-textfield__input " type="text" name="addr11" placeholder="住所欄">
64            </div>
65            </div>
66          <div class="button">Next</div>
67        </fieldset>
68
69        <fieldset class="section" name="sec">
70          <h3>え</h3>
71          <input type="password" name="password" id="password" placeholder="Password">
72          <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
73
74
75          <div class="city-list-block">
76         <!--  <form class=action="" method="post">-->
77
78             <p>お</p>
79             <select name="country" class="country">
80
81               <option value="no_select" disabled style='display:none;' selected="selected" class="msg">都道府県</option>
82               <option value="Japan" class="japan">北海道</option>
83               <option value="America" class="America">青森県</option>
84               <option value="Australia" class="Australia">岩手県</option>
85                
86             </select>
87         </div>
88
89          <input class="submit button" type="submit" value="送信">
90        </fieldset>
91        <fieldset class="section">
92          <h3>依頼完了!</h3>
93          <p>ご利用いただきありがとうございます。</p>
94        
95          <div class="button">終了</div>
96        </fieldset>
97      </form>
98    </div>
99  </div>
100
101  <script src="aaa.js"></script>
102</body>
103</html>
104

m.ts10806

2018/07/05 00:08

「戻る」ボタン　なぜ<body>より前にあるのでしょうか。ボタンは｢1つ」ですよね。

m.ts10806

2018/07/05 00:23 編集

コードはコードブロック冒頭```　を```js ```html　のように言語名を入れてください。実際のコード以外は含まないようにしてください。（コピペで再現確認する際のノイズとなります）できればインデントもきちんとしていただければと。グチャグチャになっているとそれがバグの温床になります。既にカッコの数が合ってないように思います。

m.ts10806

2018/07/05 00:13

CSSもご提示ください。

SteveLight

2018/07/05 00:49

申し訳ございません。部分的にコピーして間違えてしまいました。ご指摘ありがとうございます。宜しくお願い致します。

kei344

2018/07/05 01:39

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

SteveLight

2018/07/05 01:58

実装したい機能はフォームの戻るボタンで一つ前のフォームに戻ることです。 htmlで三つのsectionがありますが、これは入力フォームが３ステップになっているということです。またsectionとli要素は非表示状態ですが一番最初の要素にはis-activeが付加されており、cssからdisplay:blck;で表示されるようになっています。　 nextボタンをクリックするとjsの処理により次の要素のliとsectionにis-activeが付加されます。liでステップ数の明示、sectionで新たな入力フォームへと切り替わります。しかし戻る機能が使えません。 2ステップ目から１ステップへ戻りたくても戻せない現状です。 is-activeがsection（またはli）要素の何番目にあり、かつjs参照のコードのようにそれから、現在の要素からis-activeをリムーブし、一つ前の要素にis-activeを追加したいのです。 currentSectionとheaderSectionをグローバル変数にして、 currentSection.removeClass("is-active").prev().addClass("is-active"); headerSection.removeClass("is-active").prev().addClass("is-active"); のようにしましたが一切反応がありませんでした。知識が乏しいですがどうかお力を貸していただければと思います。宜しくお願い致します。