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}
回答1件
あなたの回答
tips
プレビュー