Rataiczak24 Rataiczak24 - 2 months ago 6
HTML Question

How to Display Multiple Rows of a Dynamic HTML Table in a Confirmation Page of Form

I am creating an HTML form that includes a table that you can dynamically add rows to. Whenever data is entered in multiple rows and I hit submit, it takes me to the confirmation page where only one row of data from the table is displayed. How can I display multiple rows?

HTML (Original Form):

<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 (Confirmation Page):

<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 (Dynamically adds rows on original form page):

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

Okay. So, your problem is that your inputs have the same name, so as they're getting passed in $_POST, they are overwriting each other. Also, even if this weren't the case, there's no way to avoid a PHP loop on your confirmation page.

In your JS function:

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)
}

Here, when we append the new row, we're giving the inputs a new name, so they don't get overwritten when passed.

In your HTML form:

<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>

We're changing your inputs into an array, so that multiple values can be passed.

On your confirmation page:

<?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; ?>

We're just looping through each of the rows.

Comments