I have a PHP sql query that returns a table.
while($row = $result->fetch_assoc()) {
echo "<tr><td id=\"cst\"><button type=\"submit\" id=\"click\" onClick=sendData(this)>".$row["Name"]</button></td></tr>";
The table is output correctly. My next step is using vanilla Javascript to pull the HTML text value associated with $row["Name"] from the button in the output table (when the button is clicked). I call the function onClick=sendData(this)
Now, in Javascript I'm attempting to access the text value like so:
function sendData(name) {
var text = name.innerText;
}
However, this isn't working. Can anyone explain why?
The yet another variant is to improve formatting of your HTML output by taking advantage of HEREDOC syntax that suits well for complex formatting
while($row = $result->fetch_assoc()) {
echo <<<HTML
<tr>
<td class="cst"> <!-- class instead `id` -->
<button
type="button" <!-- `button` type instead of `submit` -->
class="btn-click" <!-- class instead `id` -->
data-name="{$row["Name"]}">
{$row["Name"]}
</button>
</td>
</tr>
HTML;
And using vanilla JS it is possible to make smth. similar to the result snippet below.
document.addEventListener('click', function(event) {
var target = event.target;
// If the clicked element doesn't have the right selector, bail
if (!target.matches('.btn-click')) {
return;
}
var name = target.getAttribute('data-name');
alert('Button `data-name` is "' + name + '"');
// sendData logic goes further ...
}, false);
<tr>
<td class="cst">
<button type="submit" class="btn-click" data-name="Coockaracha">Reveal my name</button>
</td>
</tr>
The approach of using global click
listener is called event delegation and has some advantages. You can read about it here.
Also keep in mind that id
should be unique across the page, so it is not correct to iterate using id
. class
attribute suits nicely and allows multiples.
</div>
There are multiple problem with how you are using both PHP and JavaScript here to solve this problem. Let me break them down, and how best we can solve them.
<td id=\"cst_$row['row_id']\".
To solve all of these issues (except SQL Injection because this would require more information than was provided), your code could be changed to the following :
PHP :
while($row = $result->fetch_assoc()) {
echo "<tr><td id=\"cst_$row['row_id']\"><button class=\"test_buttons\"type=\"button\" id=\"btn_$row['row_id']\"".$row["Name"]</button></td></tr>";
In the above example, "row_id" is your unique identifier in your database table. Change this to "id" or whatever you have called it in your table.
JavaScript :
window.onload = function() {
let buttons = document.getElementsByClassName("test_buttons"); // Get all buttons you want to search for
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(event) { // On click of these buttons
event.preventDefault(); // This is required only if you want to keep the button type of submit
let text = this.textContent;
alert(text);
});
}
}
<td><button type="button" class="test_buttons">Test 1</button></td>
<td><button type="button" class="test_buttons">Test 2</button></td>
</div>