フォームの確認ページに動的HTMLテーブルの複数の行を表示する方法

Question

動的に行を追加できるテーブルを含むHTMLフォームを作成しています。データが複数の行に入力され、私が提出すると、テーブルからの1行のデータだけが表示される確認ページが表示されます。どのように複数の行を表示できますか？

HTML（オリジナル形式）：

<p> 
<div id="rebate_400p"> 
<strong>400P</strong><br> 
</div> 

<table id="tables" cellspacing="5"> 
    <tr align="center" id="table_titles"> 
     <td>Tier</td> 
     <td>Purchase Minimum</td> 
     <td>Multiplier</td> 
     <td>UOM</td> 
     <td>Retro</td> 
     <td>Guaranteed</td> 
     <td>Paid</td> 
     <td>Delete?</td> 
     <td>Add Row</td> 
    </tr> 
    <tr> 
     <td align="center" name="tier">1</td> 
     <td><input type="text" id="rebate_tables" name="purchase_minimum"></td> 
     <td><input type="text" id="rebate_tables" name="multiplier"></td> 
     <td><input type="text" id="rebate_tables" name="uom"></td> 
     <td><input type="text" id="rebate_tables" name="retro"></td> 
     <td><input type="text" id="rebate_tables" name="guaranteed"></td> 
     <td><input type="text" id="rebate_tables" name="paid"></td> 
     <td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td> 
     <td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td> 
    </tr> 
</table> 
</p> 

HTML/PHP（確認ページ）：

<p> 
<div class="border1"> 
<div id="rebate_400p"> 
<strong>400P</strong><br> 
</div> 

<table id="table" cellspacing="20"> 
    <tr align="center" id="table_row"> 
     <td>Tier</td> 
     <td>Purchase Minimum</td> 
     <td>Multiplier</td> 
     <td>UOM</td> 
     <td>Retro</td> 
     <td>Guaranteed</td> 
     <td>Paid</td> 
    </tr> 
    <tr align="center"> 
     <td>1</td> 
     <td><?php echo $_POST['purchase_minimum']; ?></td> 
     <td><?php echo $_POST['multiplier']; ?></td> 
     <td><?php echo $_POST['uom']; ?></td> 
     <td><?php echo $_POST['retro']; ?></td> 
     <td><?php echo $_POST['guaranteed']; ?></td> 
     <td><?php echo $_POST['paid']; ?></td> 
    </tr> 
</table> 
</div> 
</p> 

Javascriptが（動的に元のフォームページ上の行を追加します）：

function insRow() 
{ 

    console.log('hi'); 
    var x=document.getElementById('tables'); 
    var new_row = x.rows[1].cloneNode(true); 
    var len = x.rows.length; 
    new_row.cells[0].innerHTML = len; 

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; 
    inp1.id += len; 
    inp1.value = ''; 
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; 
    inp2.id += len; 
    inp2.value = ''; 

    var inputs = new_row.querySelectorAll('input[type=text]'); 

    for(var i=0;i<inputs.length;i++) 
    inputs[i].value=''; 


    x.appendChild(new_row) 
} 

Answer 1

はい。ですから、あなたの問題はあなたの入力が同じ名前になっているので、$ _POSTで渡されると、互いに上書きされてしまいます。また、そうでない場合でも、確認ページでPHPループを回避する方法はありません。あなたのJS機能で

：

ここ

function insRow() 
{ 
    var x=document.getElementById('tables'); 
    var new_row = x.rows[1].cloneNode(true); 
    var len = x.rows.length; 
    new_row.cells[0].innerHTML = len; 

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; 
    inp1.id += len; 
    inp1.value = ''; 
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; 
    inp2.id += len; 
    inp2.value = ''; 

    var inputs = new_row.querySelectorAll('input[type=text]'); 

    for(var i=0;i<inputs.length;i++) 
    { 
     inputs[i].value=''; 
     inputs[i].name='rows[' + len + '][' + inputs[i].dataset.name + ']'; 
    } 

    x.appendChild(new_row) 
} 

、我々は新しい行を追加するとき、私たちは入力に新しい名前を与えているので、渡されたとき、彼らは上書きされません。あなたのHTMLフォームで

：複数の値を渡すことができるように

<tr> 
      <td align="center" name="tier">1</td> 
      <td><input type="text" id="rebate_tables" data-name="purchase_minimum" name="rows[0][purchase_minimum]"></td> 
      <td><input type="text" id="rebate_tables" data-name="multiplier" name="rows[0][multiplier]"></td> 
      <td><input type="text" id="rebate_tables" data-name="uom" name="rows[0][uom]"></td> 
      <td><input type="text" id="rebate_tables" data-name="retro" name="rows[0][retro]"></td> 
      <td><input type="text" id="rebate_tables" data-name="guaranteed" name="rows[0][guaranteed]"></td> 
      <td><input type="text" id="rebate_tables" data-name="paid" name="rows[0][paid]"></td> 
      <td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td> 
      <td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td> 
     </tr> 

我々は、配列の中にあなたの入力を変更しています。あなたの確認ページで

：

<?php if(isset($_POST['rows'])): ?> 
    <table id="table" cellspacing="20"> 
     <tr align="center" id="table_row"> 
      <td>Tier</td> 
      <td>Purchase Minimum</td> 
      <td>Multiplier</td> 
      <td>UOM</td> 
      <td>Retro</td> 
      <td>Guaranteed</td> 
      <td>Paid</td> 
     </tr> 
     <?php 
      $count = 1; 
      foreach($_POST['rows'] as $row): 
     ?> 
      <tr align="center"> 
       <td><?php echo $count; ?></td> 
       <td><?php echo $row['purchase_minimum']; ?></td> 
       <td><?php echo $row['multiplier']; ?></td> 
       <td><?php echo $row['uom']; ?></td> 
       <td><?php echo $row['retro']; ?></td> 
       <td><?php echo $row['guaranteed']; ?></td> 
       <td><?php echo $row['paid']; ?></td> 
      </tr> 
     <?php 
      $count++; 
      endforeach; 
     ?> 
    </table> 
<?php endif; ?> 

我々だけの各行をループしています。