javascript 在 php foreach 中操作 html 元素

Question

Consider the following:

<? php foreach($queryResult as $res) : ?>
    // output all table columns
    <form onsubmit="return javascriptFunction(); " method="post">
    <button id="b">edit</button>
    </form>
<?php endforeach; ?>

Obviously, when the javascript function is called, the id of the buttons are the same, so:

document.getElementById(b).value;

won't work as expected. Is it possible to:

• Give each button a unique id attribute while it is created in the loop?
• Say I click the third button, is it possible for the javascript function to use that button that is clicked?

I absolutely have know idea how it can happen, looks like there's no way around it. Is this possible?

Answer 1

To give to each button a different id you can do this way:

<?php 
$i = 1; 
foreach($queryResult as $res) {  ?>
    // output all table columns
    <form onsubmit="return javascriptFunction(); " method="post">
    <button id="element-<?= $i ?>">edit</button>
    </form>
<?php $i++; } ?>

For the second question: if you want to pass the id of the button to javascriptFunction you can modify your code this way:

return javascriptFunction(<?= '\'element-'. $i . "'" ?>); 

and when javascriptFunction will be called, it will be passed the id of the button as the parameter and you could use it inside the function

Answer 2

You can use a forach and then you dont' have to keep track of the id iterator

foreach($queryResult as $id=>$res) {  ?>
    // output all table columns
    <form onsubmit="return javascriptFunction(); " method="post">
    <button id="element-<?php echo $id ?>">edit</button>
    </form>
<?php $i++; } ?>

Also, FWIW, its of course terrible practice to have multiple elements with the same id, but document.querySelectorAll('#someID'); will give you multiple elements in most browsers.