Displaying Data From Dynamic HTML Table

Question

I have an HTML form that you can input values into. You can click submit then it will show the data on a confirmation page that you entered. I was having problems with displaying multiple lines of text but got that fixed. Now I have another problem...I have 3 sets of tables and whenever information is entered (specifically in the 3rd table), it copies that data into the other table...how can this be fixed??

This is the HTML for the table and looks the same for each of the 3 tables:

<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" 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>
</table>

This is the JAVASCRIPT for each table and is extremely similar to that of the other tables except for the insRow() has a different name as well as the new_row:

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

And this is the HTML/PHP confirmation page with each table having the same code:

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

When using id for HTML elements the id's must be unique. html.spec.whatwg.org/multipage/dom.html#the-id-attribute — Xotic750
– Xotic750, Commented Sep 9, 2016 at 13:41
okay so I checked and I actually have different IDs in my HTML code...however, the IDs in the PHP/HTML were the same but I checked the rest of my code and I was never actually using those IDs so I don't think that was making any difference. — Rataiczak24
– Rataiczak24, Commented Sep 9, 2016 at 13:50

Al Foиce ѫ · Accepted Answer · 2016-09-09 13:42:13Z

1

There is a big problem in your html code: several elements have the same ids. Ids must be unique. Each table must have a different id than the other tables. Each input must have a different id than the others.

answered Sep 9, 2016 at 13:42

Al Foиce ѫ

4,33112 gold badges44 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rataiczak24 Over a year ago

okay so I checked and I actually have different IDs in my HTML code...however, the IDs in the PHP/HTML were the same but I checked the rest of my code and I was never actually using those IDs so I don't think that was making any difference.

Al Foиce ѫ Over a year ago

@Rataiczak24 Wrong, in your js var x=document.getElementById('tables'); so your are using these Ids, and you don't know wich table is selected...

Rataiczak24 Over a year ago

I fixed all of the IDs and I am still having the same problem unfortunately

Rataiczak24 Over a year ago

My PHP/HTML confirmation page actually doesn't even use the Javascript as the confirmation page just pulls data from the form and displays it

Al Foиce ѫ Over a year ago

@Rataiczak24 You still select another table to insert your datas in, not the right one. Your function insRow() shoulf first check wich table is concerned, then select the concerned table, and not another one...

|

Collectives™ on Stack Overflow

Displaying Data From Dynamic HTML Table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related