0

任意の数の行を含むことができるテーブルがあります。これらの各行は、フォームフィールドの要素を保持します。最初は、次のようになります。

<table border="2" id="familyHeader">
  <tr>
    <th>Description</th>
    <th>Still associated?</th>
  </tr>
  <tr id="addNewChildRow"> 
    <td> 
      <input type="text" ....> 
      <input type="text" ....>
    </td> 
    <td> 
      <input type="submit" ....>  <!-- this is intentionally not part of a form element -->
    </td> 
  </tr>

<form id="family" method="post" action="php/update_children.php">
  <tr id="updateChildrenRow">
    <td> > > > > > > </td>
    <td> 
      <input type="submit" id="updateChildren" name="updateChildren" class="updateChildren" value="Update Children"/> 
    </td>
  </tr>
</form>
</table>

したがって、基本的に上部には詳細を入力できます。最初の「送信」ボタンには、テーブルに行を追加するキャプチャがあります。このJavaScript/jQueryを使用して、最後の行の前に（できればform要素内に）それらを追加します。

function insert_child(id, type, snumber, serialnumber)
{
    $('#updateChildrenRow').before("<tr> <td>"+ type+" | "+snumber+" | "+serialnumber +"</td>"
    //$('#family').append("<tr> <td>"+ type+" | "+snumber+" | "+serialnumber +"</td>"
       + "<td> <input type=\"hidden\" name=\""+id+"\" value=\"false\" />" 
       + "<input type=\"checkbox\" checked=\"true\" name=\""+id +"\" value=\"true\"/> </td>"
       + "</tr>");
}

これは、要素を適切な場所に挿入するという点で機能しますが、フォームを送信すると、データはPOSTされません。ただし、フォーム要素の開口部を2行目に移動して送信すると、「addNewChildRow」ボタンがPOSTされます（これは、投稿ロジックが機能していることを示していると思いますが、動的に追加されたフィールドを検出していません）。

ご覧のとおり、テーブルではなくフォーム自体に追加しようとしましたが、これは機能しませんでした（表示されません）-フォーム要素をテーブルに動的に追加する方法を知っている人はいますか？それを取り巻く形によって「検出」されますか？

ありがとう ：）

4

2 に答える 2

2

ここでの問題は、追加されたフィールドの「検出」に関するものではありません。これは常に大いに機能します。あなたの本当の問題は、「form」タグを「table」の子として配置することですが、これは許可されておらず、ブラウザではエラーとして扱われます。ブラウザはそれを修正しようとします-そして、'form'タグをすぐに閉じて、すべてのコンテンツを外部に移動しようとする以外に何もできません。（彼ができる限りあなたに与えるために）。その後、失われた「/ form」を見つけて、それを一掃します。

マークアップは次のように変換されます。


<table border="2" id="familyHeader">
 .......
<form id="family" method="post" action="php/update_children.php"></form>

  <tr id="updateChildrenRow">
    <td> > > > > > > </td>
    <td> 
      <input type="submit" id="updateChildren" name="updateChildren" class="updateChildren" value="Update Children"/> 
    </td>
  </tr>
</table>

これで、新しい入力がフォームの外部で作成されました。

これを修正するには、次のいずれかを実行できます。

  • テーブル全体を「form」タグに入れます。最も簡単な方法ですが、この場合、2つの追加入力があり（問題ありません-名前属性を追加しないでください-それらはPOSTされません）、最初のボタンのタイプを「送信」から「ボタン」に変更する必要があります'したがって、フォームの送信はトリガーされません。
  • 'form'タグを'td'の1つに入れるか、フォーム全体をテーブルの外に置きます。この場合、アティショナルフィールドの作成方法を変更して、希望どおりに表示されるようにする必要があります。（フォームに新しい'td'を直接追加できないことを覚えておいてください。フォーム内に新しいテーブルを作成し、それにセルと行を追加する必要があります。必要なものを取得するためにすべてのスタイルを設定できます。

PS。また、新しく作成された非表示の要素とチェックボックスに同じ名前があります。これがまさにあなたが望むものであることを確認してください-動作は予期しないものになる可能性があります。

于 2012-08-08T11:18:09.940 に答える
1

$ .ajax（type post）または$ .postを実行して、$（'＃family'）。serialize（）をデータとして渡します。

于 2012-08-08T09:56:15.807 に答える