質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

2499閲覧

ラジオボタンを含むフォームの複製

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/09/04 03:39

編集2022/01/12 10:55

イメージ説明
上の画像のようなラジオボタンを含むフォームを複製できるようにしたいです。

html

1<ul class="list_form type_wall" id="wall_paper1"> 2 <li id="form_color_01" class="required"> 3 <article> 4 <div class="ttl_form"> 5 <p class="ttl">カラー</p> 6 </div> 7 <div class="cnt_form"> 8 <div class="wrap_input"> 9 <div class="wrap_radio"> 10 <?php 11 $this->Form->setTemplates([ 12 'nestingLabel' => '{{input}}<label{{attrs}}><div class="img"></div><span>{{text}}</span></label>', 13 'formGroup' => '{{input}}', 14 ]); 15 ?> 16 <?= $this->Form->radio('wall_color.0', [ 17 ['value' => '1', 'text' => 'ブルー', 'checked' => 'checked'], 18 ['value' => '2', 'text' => 'レッド'], 19 ['value' => '3', 'text' => 'ブルーxパープル'] 20 ]); 21 ?> 22 </div> 23 </div> 24 </div> 25 </article> 26 </li> 27 <li> 28 <div class="btnarea"> 29 <a class="btn_add" id="add_wall">施工面を増やす</a> 30 </div> 31 </li> 32</ul>

出力後のhtml(複製した後)

html

1<ul class="list_form type_wall" id="wall_paper1"> 2 <li id="form_color_01" class="required"> 3 <article> 4 <div class="ttl_form"> 5 <p class="ttl">カラー</p> 6 </div> 7 <div class="cnt_form"> 8 <div class="wrap_input"> 9 <div class="wrap_radio"> 10 <input type="hidden" name="wall_color[0]" value=""> 11 <input type="radio" name="wall_color[0]" value="1" checked="checked" id="wall-color-0-1"> 12 <label for="wall-color-0-1"> 13 <div class="img"></div> 14 <span>ブルー</span> 15 </label> 16 <input type="radio" name="wall_color[0]" value="2" id="wall-color-0-2"> 17 <label for="wall-color-0-2"> 18 <div class="img"></div> 19 <span>レッド</span> 20 </label> 21 <input type="radio" name="wall_color[0]" value="3" id="wall-color-0-3"> 22 <label for="wall-color-0-3"> 23 <div class="img"></div> 24 <span>ブルーxパープル</span> 25 </label> 26 </div> 27 </div> 28 </div> 29 </article> 30 </li> 31 <li> 32 <div class="btnarea"> 33 <a class="btn_add" id="add_wall">施工面を増やす</a> 34 </div> 35 </li> 36</ul> 37<ul class="list_form type_wall" id="wall_paper2"> 38 <li id="form_color_01" class="required"> 39 <article> 40 <div class="ttl_form"> 41 <p class="ttl">カラー</p> 42 </div> 43 <div class="cnt_form"> 44 <div class="wrap_input"> 45 <div class="wrap_radio"> 46 <input type="hidden" name="wall_color[1]" value> 47 <input type="radio" name="wall_color[1]" value checked="checked" id="wall-color-1-1"> 48 <label for="wall-color-0-1"> 49 <div class="img"></div> 50 <span>ブルー</span> 51 </label> 52 <input type="radio" name="wall_color[1]" value id="wall-color-1-2"> 53 <label for="wall-color-0-2"> 54 <div class="img"></div> 55 <span>レッド</span> 56 </label> 57 <input type="radio" name="wall_color[1]" value id="wall-color-1-3"> 58 <label for="wall-color-0-3"> 59 <div class="img"></div> 60 <span>ブルーxパープル</span> 61 </label> 62 </div> 63 </div> 64 </div> 65 </article> 66 </li> 67 <li> 68 <div class="btnarea"> 69 <a class="btn_add" id="add_wall">施工面を増やす</a> 70 </div> 71 </li> 72</ul>

jquery

1$('#add_wall').on('click', function () { 2 <?php // 要素の数をカウントして、複製したフォームのnameを変更する ?> 3 classLength = $('[id^=wall_paper]').length; //要素数 1, 2 4 selector = "#wall_paper"+(classLength); //1つ前のID名 #company1, 2 5 newSelector = "wall_paper"+(classLength + 1); //新しいID company2,3 6 <?php // クローン処理 ?> 7 $("#wall_paper1").clone(true).insertAfter(selector).attr('id', newSelector); 8 <?php // 複製したものに関する調整処理 ?> 9 $("#" + newSelector).find("input").each(function(i, elm){ 10 elm.name = elm.name.replace(/[[0-9]+]/, '[' + classLength + ']'); 11 elm.id = elm.id.replace(/\-[0-9]+\-/, '-' + classLength + '-'); 12 elm.value = null; 13 }); 14});

現状はwall_colorというnameのフォームを複製するとwall_color[0], wall_color[1]というように
配列でサーバー側にポストするようにしています。

それに伴いlabelのforの値も変更したいのです。
今は
<label for="wall-color-0-1">(ブルー)<label for="wall-color-0-2">(レッド)<label for="wall-color-0-3">(ブルーxパープル)
とういう風にlabelのforの値が変わらないので複製したラジオボタンが動作しない状態です。
どなたかご教示いただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/09/04 03:58

複製はPHPではなくjavascriptでするのでしょうか? であればPHP側のソースは出力後のHTMLで提示ください
退会済みユーザー

退会済みユーザー

2019/09/04 04:50

javasscriptで複製しております。 出力後のHTMLのコードを追加いたしました。
yambejp

2019/09/04 04:50

HTML拝見しました。複製はPHP側でやっているということですか? それであればidがかぶらないようPHP側で出力を調整すればよいでしょう
退会済みユーザー

退会済みユーザー

2019/09/04 05:00

申し訳ございません、私の知識不足で理解できておりません。 複製後のlabel、先ほど添付したコードのid=wall_paper2のulタグの中のlabelのforの値がwall-color-1-1, wall-color-1-2となればよいと思うのですが...
guest

回答1

0

こんなふうにidとforの組み合わせになるように調整ください

HTML

1<ul class="list_form type_wall" id="wall_paper1"> 2 <li id="form_color_01" class="required"> 3 <article> 4 <div class="ttl_form"> 5 <p class="ttl">カラー</p> 6 </div> 7 <div class="cnt_form"> 8 <div class="wrap_input"> 9 <div class="wrap_radio"> 10 <input type="hidden" name="wall_color[0]" value=""> 11 <input type="radio" name="wall_color[0]" value="1" checked="checked" id="wall-color-0-1"> 12 <label for="wall-color-0-1"> 13 <div class="img"></div> 14 <span>ブルー</span> 15 </label> 16 <input type="radio" name="wall_color[0]" value="2" id="wall-color-0-2"> 17 <label for="wall-color-0-2"> 18 <div class="img"></div> 19 <span>レッド</span> 20 </label> 21 <input type="radio" name="wall_color[0]" value="3" id="wall-color-0-3"> 22 <label for="wall-color-0-3"> 23 <div class="img"></div> 24 <span>ブルーxパープル</span> 25 </label> 26 </div> 27 </div> 28 </div> 29 </article> 30 </li> 31 <li> 32 <div class="btnarea"> 33 <a class="btn_add" id="add_wall-1">施工面を増やす</a> 34 </div> 35 </li> 36</ul> 37<ul class="list_form type_wall" id="wall_paper2"> 38 <li id="form_color_02" class="required"> 39 <article> 40 <div class="ttl_form"> 41 <p class="ttl">カラー</p> 42 </div> 43 <div class="cnt_form"> 44 <div class="wrap_input"> 45 <div class="wrap_radio"> 46 <input type="hidden" name="wall_color[1]" value=""> 47 <input type="radio" name="wall_color[1]" value="1" checked="checked" id="wall-color-1-1"> 48 <label for="wall-color-1-1"> 49 <div class="img"></div> 50 <span>ブルー</span> 51 </label> 52 <input type="radio" name="wall_color[1]" value="2" id="wall-color-1-2"> 53 <label for="wall-color-1-2"> 54 <div class="img"></div> 55 <span>レッド</span> 56 </label> 57 <input type="radio" name="wall_color[1]" value="3" id="wall-color-1-3"> 58 <label for="wall-color-1-3"> 59 <div class="img"></div> 60 <span>ブルーxパープル</span> 61 </label> 62 </div> 63 </div> 64 </div> 65 </article> 66 </li> 67 <li> 68 <div class="btnarea"> 69 <a class="btn_add" id="add_wall-2">施工面を増やす</a> 70 </div> 71 </li> 72</ul>

調整

PHP

1<?PHP 2$wall_color=filter_input(INPUT_POST,'wall_color',FILTER_VALIDATE_INT,FILTER_REQUIRE_ARRAY); 3print_r($wall_color); 4?> 5<form method="post"> 6<ul class="list_form type_wall" id="wall_paper1"> 7 <li id="form_color_01" class="required"> 8 <article> 9 <div class="ttl_form"> 10 <p class="ttl">カラー</p> 11 </div> 12 <div class="cnt_form"> 13 <div class="wrap_input"> 14 <div class="wrap_radio"> 15 <input type="radio" name="wall_color[0]" value="" checked="checked" style="display:none"> 16 <input type="radio" name="wall_color[0]" value="1" id="wall-color-0-1"> 17 <label for="wall-color-0-1"> 18 <div class="img"></div> 19 <span>ブルー</span> 20 </label> 21 <input type="radio" name="wall_color[0]" value="2" id="wall-color-0-2"> 22 <label for="wall-color-0-2"> 23 <div class="img"></div> 24 <span>レッド</span> 25 </label> 26 <input type="radio" name="wall_color[0]" value="3" id="wall-color-0-3"> 27 <label for="wall-color-0-3"> 28 <div class="img"></div> 29 <span>ブルーxパープル</span> 30 </label> 31 </div> 32 </div> 33 </div> 34 </article> 35 </li> 36 <li> 37 <div class="btnarea"> 38 <a class="btn_add" id="add_wall-1">施工面を増やす</a> 39 </div> 40 </li> 41</ul> 42<ul class="list_form type_wall" id="wall_paper2"> 43 <li id="form_color_02" class="required"> 44 <article> 45 <div class="ttl_form"> 46 <p class="ttl">カラー</p> 47 </div> 48 <div class="cnt_form"> 49 <div class="wrap_input"> 50 <div class="wrap_radio"> 51 <input type="radio" name="wall_color[1]" value="" checked="checked" style="display:none"> 52 <input type="radio" name="wall_color[1]" value="1" id="wall-color-1-1"> 53 <label for="wall-color-1-1"> 54 <div class="img"></div> 55 <span>ブルー</span> 56 </label> 57 <input type="radio" name="wall_color[1]" value="2" id="wall-color-1-2"> 58 <label for="wall-color-1-2"> 59 <div class="img"></div> 60 <span>レッド</span> 61 </label> 62 <input type="radio" name="wall_color[1]" value="3" id="wall-color-1-3"> 63 <label for="wall-color-1-3"> 64 <div class="img"></div> 65 <span>ブルーxパープル</span> 66 </label> 67 </div> 68 </div> 69 </div> 70 </article> 71 </li> 72 <li> 73 <div class="btnarea"> 74 <a class="btn_add" id="add_wall-2">施工面を増やす</a> 75 </div> 76 </li> 77</ul> 78<input type="submit" value="send"> 79</form> 80

投稿2019/09/04 05:08

編集2019/09/04 05:25
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/09/04 05:21

ちなみにラジオボタンの未チェック用にhiddenでデフォルト設定 していますが、あまりお薦めはできません。 デフォ値なら同じradioをstyle="display:none"したほうがよいですし そもそもデフォ値をおかずにfilter_inputで値を取る手もあります (この手の配列だとやや微妙ですが・・・)
退会済みユーザー

退会済みユーザー

2019/09/04 07:42

毎度回答ありがとうございます。いまだにforの値の変え方がわからないのですが、yambejp様が回答してくださったコードで試してみます!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問