javascript manipulating html elements in a php foreach

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?

Yes, use the key with the id, php.net/manual/en/control-structures.foreach.php, assuming this isn't an associative array. foreach($queryResult as $key => $res) and id="b<?php echo $key;?>" — chris85
– chris85, Commented Jun 17, 2015 at 20:37

Moppo · Accepted Answer · 2015-06-18 06:42:45Z

2

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

edited Jun 18, 2015 at 6:42

answered Jun 17, 2015 at 20:38

Moppo

19.4k5 gold badges68 silver badges66 bronze badges

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

5 Comments

lightning_missile Over a year ago

when I try onsubmit="return javascriptFunction(<?= 'element-'$i ?>); ", it gave me an error saying undefined $i, expected "," or ";"

lightning_missile Over a year ago

I just changed it to onsubmit="return javascriptFunction(<?= 'element'+$i ?>); " it's working now.

Moppo Over a year ago

yes, there was an error: my purpose was to pass the string 'element-n' to the function. I have updated the code, now it should work

lightning_missile Over a year ago

ok, but why does this work? onsubmit="return javascriptFunction(<?= 'element'+$i ?>); "

Moppo Over a year ago

probably because it's evalutated in javascript, but not sure what it will produce...you could check in the HTML code

chiliNUT · Accepted Answer · 2015-06-17 20:53:44Z

0

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.

answered Jun 17, 2015 at 20:53

chiliNUT

19.5k14 gold badges72 silver badges116 bronze badges

Collectives™ on Stack Overflow

javascript manipulating html elements in a php foreach

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related