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

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

解決済

2回答

1376閲覧

フォームを追加し、入力した内容を随時表示させたい

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/11 06:47

前提・実現したいこと

ボタンを押すとフォームが追加され、フォームに入力された内容を自動でページの下に表示するようにしたいです。

発生している問題

追加したフォームに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を使用

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

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

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

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

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

guest

回答2

0

ベストアンサー

イマイチ「目指している形」がわかりません

javascript

1<script> 2$(function(){ 3 $('#btn').on('click',function(){ 4 var div_element = $('<div>').html('<p><form id="n"><input type="text" size="10" name="x"><input type="text" size="10" name="y"></form></p>'); 5 $('#add').append(div_element); 6 var result=$('form').attr('id',function(){return $('form').index(this);}); 7 //console.log(result); 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).serializeArray(); 16 }).get(); 17 $("#out").html(JSON.stringify(fields)); 18 }); 19}); 20 21</script> 22<div> 23<input type="button" value="追加" id="btn"> 24</div> 25<div id="add"></div> 26<div id="out"></div>

表示方法調整

javascript

1<script> 2$(function(){ 3 $('#btn').on('click',function(){ 4 var div_element = $('<div>').html('<p><form id="n"><input type="text" size="10" name="x"><input type="text" size="10" name="y"></form></p>'); 5 $('#add').append(div_element); 6 var result=$('form').attr('id',function(){return $('form').index(this);}); 7 //console.log(result); 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('[name=x]').val()+" "+$(this).find('[name=y]').val(); 16 }).get(); 17 $("#out").html(fields.join("<br>\n")); 18 }); 19}); 20 21</script> 22<div> 23<input type="button" value="追加" id="btn"> 24</div> 25<div id="add"></div> 26<div id="out"></div>

投稿2019/01/11 07:36

編集2019/01/15 10:31
yambejp

総合スコア114572

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

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

jsrookie

2019/01/13 11:26

回答ありがとうございます。 目指しているものにかなり近いため、とてもありがたいです。 書いて頂いたコードですと、 [追加ボタン] [ 1 ][ 2 ](form#0) [ 3 ][ 4 ](form#1) [{"name":"x","value":"1"},{"name":"y","value":"2"},{"name":"x","value":"3"},{"name":"y","value":"4"}] というように表示されます。 これを 1 2 3 4 と、フォームごとに改行をしたうえで、フォームの中身のみを表示させたいです。 どのようにすればよいでしょうか?
yambejp

2019/01/15 10:32

serializeArrayの指定があったので使っていましたが 追記の内容ですと直接参照すればよいでしょう
guest

0

追加したフォームにID(#i)を与え、iには数字を代入しています。

でもこの書き方↓だと id="i"を見に行こうとしていますよね。
$("#i").serializeArray() 

↓のようにした上で
$("#"+i).serializeArray() 

showvalues()の引数に作成したformの番号(i)を渡せば良いのではないでしょうか。
いずれにしてもこのままだとスコープの関係でshowvalues()内では変数iはそのまま使えませんので、
引数にするかグローバルに保持しておくかどちらかにする必要があります。

投稿2019/01/11 07:18

m.ts10806

総合スコア80765

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

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

jsrookie

2019/01/13 11:49

回答ありがとうございます。 iをグローバル変数の宣言をしてみたのですが、上手くいきませんでした。 showvalues()の引数に作成したformの番号(i)を渡せば良いのではないでしょうか。 いずれにしてもこのままだとスコープの関係でshowvalues()内では変数iはそのまま使えませんので、 引数にするかグローバルに保持しておくかどちらかにする必要があります。 ↑これはどのようにすればよいのでしょうか? 当方プログラミング初心者なため具体的にどうすればよいかよくわかりません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問