bootstrapのモーダルでのフォームの処理

Question

###前提・実現したいこと
bootstrapのモーダルを使ってフォームでの登録処理をしようとしています。
条件があり、お店と数量と商品を入力するボックスがあり、ある数量(ここでは100とします)に満たない場は、「次へ」ボタンが出現します。
そして、100に達するまで入力フォームが出続け、100になったら「次へ」ボタンが「確認」ボタンに変わり、押すことによって確認画面が表示されます。

確認画面では、

1 , 
お店 東京
商品 ジャケット
数量 20

2 , 
お店 大阪
商品 ジャケット
数量 30

3 , 
お店 名古屋
商品 ジャケット
数量 30

4 , 
お店 仙台
商品 ジャケット
数量 20

のように表示させたいです。
試してみるにもどうすればいいかわからないので
よろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
jquery 1.12.4
bootstrap 3.3.7

Answer 1

データを保持する変数を用意しましょう。

var data = [];

「次へ」、または「確認」ボタンクリック時に用意した変数にデータを格納していきます。
また、data.pop()で最後に格納されたデータをフォームに展開し、変数から削除すれば「前へ」ボタンにも対応できます。

data.push({
  store:"お店A",
  goods:"商品A"
  amount:10
});

数量の入力フォームのkeypressイベントで、上記で格納した数量と入力中の数量を足して、
ボタンを「次へ」から「確認」に変更します。

「次へ」ボタンを押した時の挙動としては、データを格納したあとにフォームをクリアするといいと思います。

「確認」ボタンを押した時は、変数dataに格納されているデータを展開します。

Comments

[komachi168]

ご回答ありがとうございます。
おかげさまで確認画面まではスムーズにできました。

大変恐縮ですが、もう一点ございまして、
確認画面でそれぞれに編集ボタンをつけてそれぞれ編集できるようにしたいのですが、
どのようにやればよろしいでしょうか。
編集ボタン→編集画面→確認ボタン→確認画面（編集したデータのみ変更するイメージです）

よろしくお願いいたします。

[mr-hisa-child]

モーダルで編集する認識でよろしいでしょうか？

データ展開時
・buttonタグなどで編集ボタンをつけてあげる。buttonタグのdata属性にid（レコードの識別に利用）をセット。

編集ボタンクリック時
・idを取得し、変数に保持する。
・編集ボタンが押されたレコードをモーダルの入力フィールドに展開し、モーダルを表示する。

確認ボタンクリック時
・変数に保持したidに一致するレコードの値を更新。
・変数に保持したidを初期化

同一モーダルで行う場合、確認ボタンの挙動が変わるので、
変数のidを見て判断すればいいかと思います。

[komachi168]

ありがとうございます。

編集ボタンクリック時
・idを取得し、変数に保持する。
・編集ボタンが押されたレコードをモーダルの入力フィールドに展開し、モーダルを表示する。

ここまではできました。
ですが、次の「確認ボタンクリック時」の動作がうまくいきません。
現状は確認ボタンを押すと、最初の確認画面一覧のデータに編集したレコードが追加されてしまいます。

```
# お店　　　　商品 数量
1 東京　 ジャケット　　2
2 大阪 　　 ジャケット　 1
1 undefined undefined undefined
```
一番下が編集したレコードです。

[mr-hisa-child]

確認ボタンクリック後の挙動を、変数に格納されているidの有無で判定してみてはいかがでしょう？

if(id){
// 編集反映処理
}else{
// 一覧表示処理
}

編集した結果を反映する場合は、保持したidに一致するレコード（buttonのdata属性をみる）の値を上書きします。

[komachi168]

遅くなりまして大変申し訳ございません。
何とか教えていただいた方法で実装することができました。
お忙しいところありがとうございました。