2017-09-04 10 views
0

各行で編集可能なテーブルを作成したいとします。同時に私はすべての行のデータをファイルに入れたいと思っています。関連付けられた配列内のすべてのデータの投稿要求を送信する

id = downloadのボタンをクリックすると、id = firstRowの送信ボタンをクリックしたように、すべての行のすべてのデータが取得できますが、最初の行のみが表示されます。

ボタンを1回クリックするだけで、すべてのデータ行を取得する方法を知っている人はいますか? 私は現在PHPを使用していますので、PHPやHTMLを使用してこれを解決することは大きな助けになります。

<form method="post" action="allRows.php"> 
    <table border="1"> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Gender</th> 
      <th>Single</th> 
      <th>Test button</th> 
     </tr> 
     <tr> 
      <form action="oneRow.php" method="post"> 
       <td><input type="text" name="person[0][name]"></td> 
       <td><input type="text" name="person[0][age]"></td> 
       <td><input type="text" name="person[0][sex]"></td> 
       <td><input type="text" name="person[0][spouse]"></td> 
       <td><input id="firstRow" type="submit" name="test"></td> 
      </form> 
     </tr> 
     <tr> 
      <form action="oneRow.php" method="post"> 
       <td><input type="text" name="person[1][name]"></td> 
       <td><input type="text" name="person[1][age]"></td> 
       <td><input type="text" name="person[1][sex]"></td> 
       <td><input type="text" name="person[1][spouse]"></td> 
       <td><input id="secondRow" type="submit" name="test"></td> 
      </form> 
     </tr> 
    </table> 
    <input id="download" type="submit" name="Download" value="Download"> 
</form> 
+0

」タグを使用して、その点からどのように処理しますか。 –

+0

フォームタグを1つだけ使用すると、個々の行を個別に編集することはできません。 –

答えて

1

あなたのフォーム内のネストできませんフォーム、それは無効なHTMLですので、あなたはすべてのこれらの機能を持つようにしたい場合は、あなたはJSフォームにそれらを組み立てることにより、一度にすべてのフォームを送信するためにJavaScriptを採用する必要があります。一度にすべてのフィールドを含む1つのフォームを送信しない限り、純粋なPHPは使用できません。

PHPで
<!-- You need the jQuery library --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <table border="1"> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Gender</th> 
      <th>Single</th> 
      <th>Test button</th> 
     </tr> 
     <tr> 
      <!-- You need to add class="rowform" to each form tag --> 
      <form action="oneRow.php" method="post" class="rowform"> 
       <td><input type="text" name="person[0][name]"></td> 
       <td><input type="text" name="person[0][age]"></td> 
       <td><input type="text" name="person[0][sex]"></td> 
       <td><input type="text" name="person[0][spouse]"></td> 
       <td><input id="firstRow" type="submit" name="test"></td> 
      </form> 
     </tr> 
     <tr> 
      <form action="oneRow.php" method="post" class="rowform"> 
       <td><input type="text" name="person[1][name]"></td> 
       <td><input type="text" name="person[1][age]"></td> 
       <td><input type="text" name="person[1][sex]"></td> 
       <td><input type="text" name="person[1][spouse]"></td> 
       <td><input id="secondRow" type="submit" name="test"></td> 
      </form> 
     </tr> 
    </table> 
<!-- Create the empty download all form, add id="allrows" --> 
<form method="post" action="allRows.php" id="allrows"> 
    <input id="download" type="submit" name="Download" value="Download"> 
</form> 

<script> 
// Start document listener 
$(document).ready(function(e) { 
    // Listen for the download form to submit 
    $('#allrows').on('submit',function(e) { 
     // Stop it from reloading the page (submitting the form) 
     e.preventDefault(); 
     // Create a storage array 
     var data = []; 
     // Loop through each form (each form tag needs the "rowform" class 
     $.each($('.rowform'),function(k,v) { 
      // Fetch all the data from the form 
      data[k] = $(v).serialize(); 
     }); 
     // Create a storage array for the form 
     var form = []; 
     // Start building a form 
     form.push('<form action="allRows.php" method="post">'); 
     // Implode the form data from each form 
     form.push('<input name="allfields[]" value="'+data.join('" /><input name="allfields[]" value="')+'" />'); 
     // Create a submit field 
     form.push('<input type="submit" value="submit" /></form>'); 
     // Combine the html form 
     form = form.join(''); 
     // Submit the form 
     $(form).submit(); 
    }); 
}); 
</script> 

、あなたがそうallfieldsキーをチェックする必要があります。

if(!empty($_POST['allfields'])) { 
    // do code 
} 

何が表示されますことのようなものです:

Array 
(
    [allfields] => Array 
     (
      [0] => person%5B0%5D%5Bname%5D=qewrqwer&person%5B0%5D%5Bage%5D=adsf&person%5B0%5D%5Bsex%5D=fdsdfds&person%5B0%5D%5Bspouse%5D=sdfds 
      [1] => person%5B1%5D%5Bname%5D=sssssss&person%5B1%5D%5Bage%5D=sssweeeee&person%5B1%5D%5Bsex%5D=qqqqqq&person%5B1%5D%5Bspouse%5D=222222 
     ) 
) 

そして、あなたはそのフィールドが表示されます一連の配列とクエリ文字列を持ちます。 urldecode()など

+0

私は必ずJavascriptについてもっと学ぶ必要があります。今のところ、私はこれを、隠されている別の入力セットを作成し、すべてのデータを一度に取り出して、それをフォームに入れています。この入れ子式を行うことによって、避けることができます。 –

関連する問題