CODEWITHSUNDEEP
javascriptphphtmlmysqlbutton
Bazinga
Bazinga

Reputation: 499

How do I get button's ID from a list of buttons?

I haven't worked much with php and javascript and was hoping to get some help. I want to be able to detect which button was clicked exactly. I'm creating one button per row but I don't know how to figure out what row the click was made in. This is what I have so far...

    # Get all the table data from the database
$getData = mysqli_query($conn, "SELECT * FROM `query_table`") or die ("Error occured while selecting!");

// echo '<form method="post" action="index.php">';
echo '<table border="1">';

echo '<tr>';
echo '<td>Questions</td>';
echo '<td>Likes</td>';
echo '<td></td>';
echo '</tr>';

# Loop through each row and print out the question
while ($row = mysqli_fetch_array($getData)) {
    echo '<tr>';
        echo '<td>';
            echo $row['Question'];
        echo '</td>';

        echo '<td>';
            echo $row['Likes'];
        echo '</td>';

        echo '<td>';
        ?>

            <input type="button" id="myButton" value="Like" onclick="myFunc(<?=$row['ID']?>)" />

        <?php
        echo '</td>';
    echo '</tr>';
}

echo '</table>';
// echo '</form>';
echo '<p id="text"></p>';

mysqli_close($conn);
?>

<script type="text/javascript">
function myFunc(id) {
    document.getElementById("text").innerHTML = id;
}
</script>

So far this prints out the row id where the button was clicked, but I don't suppose I can assign that parameter value directly to a php variable that I can then use for mysql queries. How is stuff like this normally done, please help.

Upvotes: 2

Views: 2073

Answers (1)

Peter Brand
Peter Brand

Reputation: 624

<input type="button" data-id="<?=$row['ID']?>" value="Like" onclick="myFunc(this)">

and 

<script type="text/javascript">
function myFunc(button) {
    document.getElementById("text").innerHTML = button.getAttribute('data-id');
}
</script>

In JavaScript the token "this" refers to the context in which the code is running which in this case is the button. Store custom data in attributes prefixed with data- to ensure they are not disturbed - standard practise.

Upvotes: 1

Related Questions