teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

8

追記

2017/12/16 05:02

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
@@ -19,6 +19,33 @@
19
19
  ![イメージ説明](c02c9398e9daed7e1382be18c2156673.jpeg)
20
20
 
21
21
 
22
+ 質問が分かりづらくてすいません。
23
+ よろしくお願いします。
22
24
 
25
+
26
+
27
+ 追記:
23
- 質問が分かりづらくてすいません。
28
+ javascript側でのフォーム追加処理はこな感じです※jquery使ってます
29
+
24
- よろしくお願いします。
30
+ ```javascript
31
+ $load_content.on("click",".js_add_form_child", function() {
32
+ //一番最後のフォームグループ取得
33
+ var $form_group = $(this).parents('.panel-body').find(".form_group").last();
34
+      //フォームグループの要素数からname属性インクリメント用の値取得
35
+ var new_form_cnt = $(this).parents('.panel-body').find(".form_group").length;
36
+
37
+ //既存のフォームのname属性から新しいフォームの用のname属性文字列を生成
38
+ var new_form1_name = $form_group.find(".js_form1").attr("name").replace(/(table_name[\d+][form1][)\d+(])/g, "$1"+new_form_cnt+"$2");
39
+ var new_form2_name = $form_group.find(".js_form2").attr("name").replace(/(table_name[\d+][form2][)\d+(])/g, "$1"+new_form_cnt+"$2");
40
+ var new_form3_name = $form_group.find(".js_form3").attr("name").replace(/(table_name[\d+][form3][)\d+(])/g, "$1"+new_form_cnt+"$2");
41
+
42
+ //既存のフォームをクローンしてフォーム群の末尾に追加
43
+ $form_group.clone(false)
44
+ .find(".js_form1").attr('name', new_form1_name).end()
45
+ .find(".js_form2").attr('name', new_form2_name).end()
46
+ .find(".js_form3").attr('name', new_form3_name).end()
47
+ .insertAfter($form_group);
48
+ });
49
+ ```
50
+
51
+ new_formのname属性生成処理は正規表現の使い方で1つにまとめられると思ってます

7

修正

2017/12/16 05:02

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
@@ -6,10 +6,19 @@
6
6
  ここで問題なのがname属性のつけ方です。動的に増えるフォーム内にチェックボタンラジオボタンが複数あるため、フォームを追加する際にJavaScriptでname属性の[]内の値をインクリメントしています。
7
7
  これが非常に厄介で例えばname="hoge[0][huga][1][]のようなフォームが沢山あります。
8
8
 
9
- このように一対多の関係にあるフォームが複数ある場合の画面をどう作成したらいいでしょうか。なるべく1つの画面に収まるようにしたいです。モーダル等を使うのもありでしょうか
9
+ このように一対多の関係にあるフォームが複数ある場合の画面をどう作成したらいいでしょうか。なるべく1つの画面に収まるようにしたいです。
10
10
 
11
+ ここでの1つの画面とは画面遷移せず、またメインの入力画面にすぐ戻れるようになっている状態という意味でとらえていただければと思います。なので、フォームを分割してモーダルなどで表示したりタブで分けたりするのもいいかなと思います。
12
+
13
+ 改善したい点は2つで。
14
+  ・長いname属性
15
+  ・画面の表示領域にフォームが詰まりすぎてデザインがよろしくない
16
+ になります。
17
+
11
18
  画面レイアウトイメージは以下のような感じです。
12
19
  ![イメージ説明](c02c9398e9daed7e1382be18c2156673.jpeg)
13
20
 
21
+
22
+
14
23
  質問が分かりづらくてすいません。
15
24
  よろしくお願いします。

6

タグ追加

2017/12/15 02:28

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
File without changes

5

情報追加

2017/12/15 00:45

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
@@ -8,5 +8,8 @@
8
8
 
9
9
  このように一対多の関係にあるフォームが複数ある場合の画面をどう作成したらいいでしょうか。なるべく1つの画面に収まるようにしたいです。モーダル等を使うのもありでしょうか
10
10
 
11
+ 画面レイアウトイメージは以下のような感じです。
12
+ ![イメージ説明](c02c9398e9daed7e1382be18c2156673.jpeg)
13
+
11
14
  質問が分かりづらくてすいません。
12
15
  よろしくお願いします。

4

2017/12/15 00:37

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  またこのフォームはJavaScriptで動的に増やせるようにしています。
6
6
  ここで問題なのがname属性のつけ方です。動的に増えるフォーム内にチェックボタンラジオボタンが複数あるため、フォームを追加する際にJavaScriptでname属性の[]内の値をインクリメントしています。
7
- これが非常に厄介で例えばname="hoge[0][huga][0][]のようなフォームが沢山あります。
7
+ これが非常に厄介で例えばname="hoge[0][huga][1][]のようなフォームが沢山あります。
8
8
 
9
9
  このように一対多の関係にあるフォームが複数ある場合の画面をどう作成したらいいでしょうか。なるべく1つの画面に収まるようにしたいです。モーダル等を使うのもありでしょうか
10
10
 

3

2017/12/14 23:56

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  お世話になります。
2
2
 
3
- 現在作成している入力フォームで、かなりネストの深いものがあります。具体的に言うと、一対多の関係にあるフォームが2つあり、これがツリー構造のように下に伸びています。
3
+ 現在作成している入力フォームで、かなりネストの深いものがあります。具体的に言うと、一対多の関係にあるフォームが2つあり、これがツリー構造のように下に伸びています。
4
4
 
5
5
  またこのフォームはJavaScriptで動的に増やせるようにしています。
6
6
  ここで問題なのがname属性のつけ方です。動的に増えるフォーム内にチェックボタンラジオボタンが複数あるため、フォームを追加する際にJavaScriptでname属性の[]内の値をインクリメントしています。

2

2017/12/14 23:55

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  お世話になります。
2
2
 
3
- 現在作成している入力フォームで、かなりネストの深いものがあります。具体的に言うと、一対多の関係にあるフォームが2つあり、ツリー構造になっているものがあります。
3
+ 現在作成している入力フォームで、かなりネストの深いものがあります。具体的に言うと、一対多の関係にあるフォームが2つあり、これがツリー構造のよう下に伸びています。
4
4
 
5
5
  またこのフォームはJavaScriptで動的に増やせるようにしています。
6
6
  ここで問題なのがname属性のつけ方です。動的に増えるフォーム内にチェックボタンラジオボタンが複数あるため、フォームを追加する際にJavaScriptでname属性の[]内の値をインクリメントしています。

1

2017/12/14 17:01

投稿

annderber
annderber

スコア98

title CHANGED
File without changes
body CHANGED
File without changes