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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

2220閲覧

配列の中身を改行させつつ表示させたい

jsrookie

総合スコア24

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/01/15 10:18

JavaScript, jQuery初心者です。宜しくお願いします。

追加ボタンを押すとフォームが追加され、フォームに入力した値を下に表示させています。追加ボタンはそれぞれ追加するフォームの数を変えています。フォームは追加するごとにIDをふっていてます(#0,#1,#2,....)。フォームの内容はshowvalues()の変数fieの配列に保存されています。
フォームに入力された内容をID毎に改行させて表示させたいのですがどうすればよいでしょうか?
現状、フォームを追加するごとに内容を変数fieに追加していっているため、showvalues()のコードだと配列の中身をすべて横に並べるだけ(現在の状況)になってしまいます。これを(目指している形)のように改行したいです。showvalues2()のようにもしてみたのですが、案の定1個ずつ縦に並ぶだけでした。
ID毎に配列を分けて中の文字列を足し、それらをshowvalues2()のように縦に並べればいいのでは?と思いましたが、そもそもID毎に配列を作ることができませんでした。。。
ご教授お願いします。

(現在の状況)
[追加1][追加2][追加3][追加4] ←追加ボタン
[ a ] ←追加されたフォーム(#0)
[ b ][ c ] ←追加されたフォーム(#1)
[ d ][ e ][ f ] ←追加されたフォーム(#2)
[ g ][ h ][ i ][ j ] ←追加されたフォーム(#3)
a b c d e f g h i j ←フォームの内容表示

(目指している形)
[追加1][追加2][追加3][追加4] ←追加ボタン
[ a ] ←追加されたフォーム(#0)
[ b ][ c ] ←追加されたフォーム(#1)
[ d ][ e ][ f ] ←追加されたフォーム(#2)
[ g ][ h ][ i ][ j ] ←追加されたフォーム(#3)
a
b c
d e f
g h i j ←フォームの内容表示

ソースコード

以前下質問で頂いたコードを自己流で変えているため、無駄な部分、見苦しい部分があるかもしれません。

JavaScript

1<script src="jquery.js"></script> 2<script> 3 4$(function(){ 5 $('#btn').on('click',function(){ 6 var div_element = $('<div>').html('<p><form id="n"><input type="text" size="10" name="name" value="a"></form></p>'); 7 $('#add').append(div_element); 8 var result=$('form').attr('id',function(){return $('form').index(this);}); 9 console.log(result); 10 $("#out").empty(); 11 $(document).find('form[id] input:eq(0)').trigger('change'); 12 }); 13 14 $('#btn2').on('click',function(){ 15 var div_element = $('<div>').html('<p><form id="n"><input type="text" size="10" name="name" value="b"><input type="text" size="10" name="name2" value="c"></form></p>'); 16 $('#add').append(div_element); 17 var result=$('form').attr('id',function(){return $('form').index(this);}); 18 console.log(result); 19 $("#out").empty(); 20 $(document).find('form[id] input:eq(0)').trigger('change'); 21 }); 22 23 $('#btn3').on('click',function(){ 24 var div_element = $('<div>').html('<p><form id="n"><input type="text" size="10" name="name" value="d"><input type="text" size="10" name="name2" value="e"><input type="text" size="10" name="name3" value="f"></form></p>'); 25 $('#add').append(div_element); 26 var result=$('form').attr('id',function(){return $('form').index(this);}); 27 console.log(result); 28 $("#out").empty(); 29 $(document).find('form[id] input:eq(0)').trigger('change'); 30 }); 31 32 $('#btn4').on('click',function(){ 33 var div_element = $('<div>').html('<p><form id="n"><input type="text" size="10" name="name" value="g"><input type="text" size="10" name="name2" value="h"><input type="text" size="10" name="name3" value="i"><input type="text" size="10" name="name4" value="j"></form></p>'); 34 $('#add').append(div_element); 35 var result=$('form').attr('id',function(){return $('form').index(this);}); 36 console.log(result); 37 $("#out").empty(); 38 $(document).find('form[id] input:eq(0)').trigger('change'); 39 }); 40 41 $(document).on('change','form[id] input',function(){ 42 var fields = $('form').filter(function(){ 43 return $(this).attr('id').match(/^[0-9]+$/); 44 }).map(function(){ 45 return a1=$(this).serializeArray(); 46 console.log(a1); 47 }).get(); 48 $("form").change(showvalues); 49 showvalues(); 50 }); 51}); 52 53function showvalues() { 54 var fie = $("form").serializeArray(); 55 console.log(fie); 56 $("#out").empty(); 57 jQuery.each(fie, function(i, field){ 58 $("#out").append(field.value + " "); 59 }); 60} 61</script> 62<div> 63 <input type="button" value="追加1" id="btn"> 64 <input type="button" value="追加2" id="btn2"> 65 <input type="button" value="追加3" id="btn3"> 66 <input type="button" value="追加4" id="btn4"> 67</div> 68<div id="add"></div> 69<div id="out"></div>

JavaScript

1function showvalues2() { 2 var fie = $("form").serializeArray(); 3 $("#out").empty(); 4 jQuery.each(fie, function(i, field){ 5 var e= $('<div>').html(field.value + " "); 6 $("#out").append(e); 7 }); 8}

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

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

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

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

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

yambejp

2019/01/15 10:33

追加ボタン1~4によって追加されるタグの数が違うのでしょうか? その際nameに命名方法など決まりがあるのでしょうか?
jsrookie

2019/01/15 10:39

ボタンによって数は違います。 nameの命名方法に決まりはありません。現状適当に名付けています。 宜しくお願いします。
guest

回答1

0

ベストアンサー

前回のやつもなおしましたが、今回の仕様をくわえて

javascript

1<script> 2$(function(){ 3 $('.btn').on('click',function(){ 4 var num=$(this).val().match(/^追加([1-9][0-9]*)$/)[1]; 5 var div_element = $('<div>').html('<p><form id="n">'+'<input type="text" size="10">'.repeat(num)+'</form></p>'); 6 $('#add').append(div_element); 7 var result=$('form').attr('id',function(){return $('form').index(this);}); 8 $("#out").empty(); 9 $(document).find('form[id] input:eq(0)').trigger('change'); 10 }); 11 $(document).on('change','form[id] input',function(){ 12 var fields = $('form').filter(function(){ 13 return $(this).attr('id').match(/^[0-9]+$/); 14 }).map(function(){ 15 return $(this).find(':text').map(function(){ 16 return $(this).val(); 17 }).get().join(" "); 18 }).get(); 19 $("#out").html(fields.join("<br>\n")); 20 }); 21}); 22 23</script> 24<div> 25<input type="button" value="追加1" class="btn"> 26<input type="button" value="追加2" class="btn"> 27<input type="button" value="追加3" class="btn"> 28<input type="button" value="追加4" class="btn"> 29<input type="button" value="追加10" class="btn"> 30</div> 31<div id="add"></div> 32<div id="out"></div>

投稿2019/01/15 10:50

編集2019/01/15 10:50
yambejp

総合スコア114572

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

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

jsrookie

2019/01/16 08:08

前回に引き続き回答ありがとうございます。 まさに私が求めていたものです。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問