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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

5819閲覧

jqueryで追加したフォームの値をFormDataで取得できない

mizutama72

総合スコア31

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/01/16 02:48

編集2019/01/16 03:56

もともと設定してあるフォームに関しては、

jquery

1var formdata = new FormData($('.upload_form_'+type).get(0));

で値を取得できますが、

jquery

1$("#newtable").clone().appendTo(".box");

により、追加したフォームに関しては、フォームに入力した値を取得できません。

jquery

1 for(item of formdata){ 2 console.log(item); 3 }

上記により、確認しましたが、フォームにはテキストボックスとファイル選択がありますが、内容は、

(2) ["text[]", ""]: (2) ["file1", File(0)]

となり、内容が取得できていません。

どのようにすれば、jqueryで追加したフォームの値を取得できるのでしょうか?
有識者の方、お知恵をお貸しください。

ちなみに、システムの仕様上、formの値をjqueryでサーバ側に送信しています。

補足:
追加するフォームは、

html

1 <table> 2 <form> 3 <tr> 4 <td><input type="text" name="text[]" /></td> 5 <td><input type="file" name="file1" value="" ></td> 6 <td > 7 <button file_upload_btn" type="button" onclick="file_upload('group')">更新</button> 8 </td> 9 </tr> 10 </form> 11 </table>

となっており、

jquery

1function file_upload(type) 2{ 3 var formdata = new FormData($('.upload_form_'+type).get(0)); 4 //formdataの確認 5 for(item of formdata){ 6 console.log(item); 7 } 8

としています。
この設定に無理がありますでしょうか?

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

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

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

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

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

guest

回答2

0

普通にとれると思いますが

javascript

1<script> 2$(function(){ 3 $('#hoge').append($('<form id="fuga"><input type="text" name="a" value="1"><input type="text" name="b" value="2"></form>')); 4 var fd=new FormData($('#fuga').get(0)); 5 for(var i of fd){ 6 console.log(i); 7 } 8}); 9</script> 10<div id="hoge"></div>

投稿2019/01/16 02:59

yambejp

総合スコア114572

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

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

mizutama72

2019/01/16 03:37

ご回答ありがとうございます! ご指摘の通りのソースを張り付けて実行してみると、取得できました。 こちらの設定が何かおかしいようです。 補足を致します。
yambejp

2019/01/16 03:39

ちなみに全容がわからないのでなんともいえませんが #newtableのcloneを.boxにappendToしていますが idがかぶるので不正です。 この場合idでの参照はできないので注意ください
guest

0

自己解決

追加するデータを

<table><form>....</form></table>から、 <form><table>....</table></form> に変更することで、フォームデータを取得できるようになりました。 お騒がせ致しました。

投稿2019/01/16 04:54

mizutama72

総合スコア31

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問