PHP loop generated buttons - only last one works?

Question

First time posting, and PHP is not my strongest area, so here goes...

My code below generates a list of buttons depending on how many values are found in my DB Table, then the second piece of code is supposed to trigger when the buttons are clicked. Everything is working except that the second piece of code only works for the last button generated. Any ideas?

<?php
$username = $_SESSION['sess_user'];

$con=mysql_connect('localhost','root','root') or die(mysql_error());
mysql_select_db('user_registration') or die("cannot select DB");

$loop = mysql_query("SELECT * FROM `vaults` WHERE username = '$username' ORDER BY vaultname asc") or die ('Error Getting User Data! <br />' .mysql_error());
$chk = mysql_num_rows($loop);

$myvalue = '';
while ($row = mysql_fetch_assoc($loop)) {
$myvalue = "{$row['vaultname']}";
echo '<form method="post"><input class="text-center" type="submit" name=' . $myvalue . ' value=' .     $myvalue . ' id="vaultSelecter"></form>';
}
?>

<?php
if(isset($_POST[$myvalue])){
echo '<script type="text/javascript">window.onload = function() {     document.getElementById("instructions").innerHTML = " HELLO WORLD! "; }</script>';}
?>

Thank you all for your replies, I appreciate it. I understand what everyone is saying, but the ID I reference in my getELementByID() is a separate DIV from the buttons, I want to change the content of the single DIV with the ID "instructions", when any of the buttons are clicked, but it only works for the last button created by the loop. Is that still due to the way I have my buttons ID'd?

For example say the above loop creates three buttons, I want each button to change the contents of the following DIV with "Hello Word".

<div id=instructions>
 replace this text
</div>

I am guessing I have to store each of the $myvalues created by the loop into an array, so that each value can be assigned separately to each button, I just have no idea how to do that.

Answer 1

You're duplicating IDs in this line:

echo '<form method="post"><input class="text-center" type="submit" name=' . $myvalue . ' value=' .     $myvalue . ' id="vaultSelecter"></form>';

and IDs must be unique. Try classes instead. Ex:

var elems = document.getElementsByClassName("text-center");
for (var i = 0; i < elems.length; i++) {
    console.log('x')
    elems[i].addEventListener('click', function () {
        alert('hello');
    }, false);
}

Answer 2

You're assigning multiple inputs to the same id , assign them to a class instead since id 's have to be unique.

You're also making a form for every button, which seems kind of pointless to me, try this instead:

echo '<form method="post">';
while ($row = mysql_fetch_assoc($loop)) {
    $myvalue = "{$row['vaultname']}";
    echo '<input class="text-center vaultSelecter" type="submit" name=' . $myvalue . ' value=' .     $myvalue . '>';
}
echo '</form>';

The id called vaultSelector is now a class, so can be accessed via getElementByClassName()

Answer 3

Instead of this:

name=' . $myvalue . ' value=' .     $myvalue . ' id="vaultSelecter"

Maybe try

name="' . $myvalue . '" value=' .     $myvalue . ' id="' . $myvalue . '"

In my opinion it is best to uniquely identify any elements that will be used as a programming element.

Just another piece of unsoliciated opinion. If you can put everything in one form it may make things easier. So when the button submits set a hidden field and continue with the form submit.