Dynamically creating buttons in html with mysql row value

Question

I am drawing all my information from my sql database and displaying it in a table in html. I want to be able to click on a button at the end of each row, or somewhere on the row, and display another set of things relating to the uniqueID in that row. However at the moment, the value does not change for each dynamically created button.

$sql = "SELECT * FROM Hybrid";
$result = mysqli_query($link, $sql);

if ($result->num_rows > 0) {
    echo "<table><tr><th>ID</th><th>Timestamp</th><th>Rate</th><th>Fiat</th><th>BTC</th><th>BTCadd</th><th>Contact</th><th>PaymentMethod</th><th>Bank</th><th>localprofile</th><th>BTname</th><th>uniqID</th><th>Confirm2</th><th>Paymentmade</th><th>Paymenttime</th></tr>";
    // output data of each row
    while ($row = $result-> fetch_assoc()) {
        echo "<tr><td>".$row["ID"].
        "</td><td>".date('d-m H:i', strtotime($row["Timestamp"])).
        "</td><td>".$row["Rate"].
        "</td><td>".$row["Fiat"].
        "</td><td>".$row["BTC"].
        "</td><td>".$row["BTCadd"].
        "</td><td>".$row["Contact"].
        "</td><td>".$row["PaymentMethod"].
        "</td><td>".$row["Bank"].
        "</td><td>".$row["localprofile"].
        "</td><td>".$row["BTname"].
        "</td><td>".$row["uniqID"].
        "</td><td>".$row["Confirm2"].
        "</td><td>".$row["Paymentmade"].
        "</td><td>".date('d-m H:i', $row["Paymenttime"]).
        "</td><td>".
        "<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>".
        "</td></tr>";
    }
    echo "</table>";
}

This bit is the button:

 <td>" . "<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>" . "</td>

and $row['uniqID'] displays all the different uniqIDs on my table in html, however, when I try this in javascript:

<script>
    var id = document.getElementById("view").value;

    function dropdown() {
        alert(id);
    };
</script>

It only alerts the first $row['uniqID'] regardless of which button I press, instead of the one corresponding to the row.

I need the value of the button to correspond to the uniqueID for that row, so I can use it in the button function, maybe there is another way?

I am stuck as to how to do this, I thought it might be something to do with the 'infamous javascript loop issue' but I am not sure if it applies, or if it does quite how to fix it?

Seth McClaine · Accepted Answer · 2015-05-12 22:27:22Z

2

id is to be unique, but you have n number of id='view'. So since there should only be 1 id='view' javascript will find the first one only. You could add this.value to the function call -

"<td>" . 
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown(this.value);' >View</button>" .
"</td>"

and then use that in your function

<script>
 function dropdown(id){
     alert(id);
 }
</script>

edited May 12, 2015 at 22:27

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

answered May 12, 2015 at 21:54

Sean

12.4k3 gold badges31 silver badges49 bronze badges

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

1 Comment

tommyrharper Over a year ago

DON! Thankyou would not have realised that myself! Very useful! Thanks all fixed :o)

Collectives™ on Stack Overflow

Dynamically creating buttons in html with mysql row value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related