前提・実現したいこと
ボタンを押すとフォームが追加され、フォームに入力された内容を自動でページの下に表示するようにしたいです。
発生している問題
追加したフォームにID(#i)を与え、iには数字を代入しています。
つまり、追加するごとにフォームのIDは#0,#1,#2,...のように与えられています。
そして、そのフォームの中身を表示させるためshowvalues()関数を使っています。
iには0,1等の情報が入っているためshowvalues()関数内ではIDを#iで指定することですべてのフォームの中身を表示することができると思ったのですが、1つも表示することができません。
直接#0,#1等指定すれば表示可能でした。
追加したフォームの内容を一括ですべて表示させたいのですが、どうすればよいでしょうか?
また、ゆくゆくはID名をただの数字ではなく#form0,#form1のように文字+数字にしたいです。
jQueryのattrでIDを変えるとそれが上手くできないのですが、どうすればよいでしょうか?
目指している形
追加ボタン
[ a ][ b ][ c ] ←フォーム(ID#0)
[ d ][ e ][ f ] ←フォーム(ID#1)
[ g ][ h ][ i ] ←フォーム(ID#2)
a b c ←フォーム(ID#0)の中身
d e f ←フォーム(ID#1)の中身
g h i ←フォーム(ID#2)の中身
該当のソースコード
HTML
1<!DOCtype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="jquery.js"></script> 7<script src="main.js"></script> 8</head> 9<body> 10<div> 11 <input type="button" value="追加" onclick="newform()"> 12</div> 13<div id="add"></div> 14<div id="out"></div> 15</body> 16</html>
JavaScript
1function newform(){ 2 var div_element = document.createElement("div"); 3 div_element.innerHTML = '<p><form id="n"><input type="text" size="10" name="x"><input type="text" size="10" name="y"></form></p>'; 4 var parent_object = document.getElementById("add"); 5 parent_object.appendChild(div_element); 6 result=$("form").attr("id",function(i){ 7 return i; 8 }); 9 console.log(result) 10 11 function showvalues() { 12 var fields = $("#i").serializeArray(); 13 $("#out").empty(); 14 jQuery.each(fields, function(i, field){ 15 $("#out").append(field.value + " "); 16 }); 17 } 18 $("form").change(showvalues); 19 showvalues(); 20}
補足情報
ブラウザはchromeを使用
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/13 11:26
2019/01/15 10:32