Javascript/jQueryが動的に追加されたフォーム要素が投稿されていません

Question

このテーマに関する多くのディスカッションを読んでいます。 （「Submit form input fields added with javascript」を含めて最終的に私は正しい軌道に乗りました）しかし、彼らの誰も完全に質問に答えなかったり、問題を解決しなかったので、私は自分の解決策の投稿をすると考えました。

私は動的に私が見つけたこのコードではjQueryを使用してフォームに余分なテキスト入力フィールドを追加しようとしていた。

jQuery("#form_table").append(
'<tr><th>'+ 
'<label><b>Date: </b></label></th><td>'+ 
'<input type="text" id="extra_date'+counter+'" />'+ 
'<label><b>Time: </b></label>'+ 
'<input type="text" id="extra_time'+counter+'" /></td></tr>'); 

テキストフィールドがフォーム内のテーブルに追加されたと私はDOMを調査したときに使用しました火かき棒、彼らはそこにいた。しかし、私がフォームを提出したとき、変数extra_date1/extra_time1は$ _POST配列にありませんでした。私は、このコードが要素をフォーム自体に追加していないことに気付きました。上記の記事はjQueryではなく、JSを使って正しい方向に私を指摘しました。私はその投稿に記載されているようにフォームに投稿しようとしましたが、うまくいきませんでした。最終的には、このコードは私の仕事：

var theForm = document.getElementById("form_table"); 
var newOption = document.createElement("input"); 
newOption.name = "extra_date"+counter; 
newOption.type = "text"; 
theForm.appendChild(newOption); 
var newOption = document.createElement("input"); 
newOption.name = "extra_time"+counter; 
newOption.type = "text"; 
theForm.appendChild(newOption); 

form_table要素は、formタグ内のテーブルタグです。上の記事のコードと違って、私はフォーム要素自体にそれを追加できないことがわかりました。これはフォームの要素でなければなりません。

これは本当にシンプルなようですが、オンラインの多くの人がこの同じ問題を抱えているように見えます。だから、これは私のように頭を引っ張っている人にとって簡潔な答えになると思います。

Answer 1

あなたのコードはid = ""は持っていません。名前= ""あなたは名前= ""を持つ必要があります。これは投稿されたものです。 。このコードの代わりに

使用：

jQuery("#form_table").append(
'<tr><th>'+ 
'<label><b>Date: </b></label></th><td>'+ 
'<input type="text" name="extra_date'+counter+'" />'+ 
'<label><b>Time: </b></label>'+ 
'<input type="text" name="extra_time'+counter+'" /></td></tr>');