Variable from html form not passing to Javascript window confirm

Question

I'm not new to stackoverflow as I've been getting answers to my questions (asked by others) answered here for quite some time, but I finally ran across something I've not been able to find an answer for yet, so hoping you guys/gals can help.

To give some brief history, I've built a hardware checkout system for lab equipment. Not too long ago, I was running mysql commands manually to add equipment, but after the job became too much with my other duties, I decided to build an admin page to manage this and assign a few other admins without knowledge of the innards a way to modify the hardware databases as well as a rudimentary add/remove user feature. This has been in place for quite awhile and in general works pretty well, but after an unfortunate incident where another admin tried to activate the browser window and clicked a delete button for another admin user by accident, I decided to put in a window confirm prompt and reference the username in the confirm window. Here is the code I have in it now. I've removed anything non-pertinent except for the pieces I'm having trouble with. If I should post the whole thing, I can, but it's just shy of 200 lines.

function DelUserValidate()
{
var clicked=document.forms["deluser"]["delrootuser"].value;
var confirmed=confirm("Are you sure you want to delete this user: "+clicked);

if (confirmed==true)
    {
return true;
    }
else
    {
return false;
    }
}
<?php
$con = mysql_connect("localhost","webby","webical");
mysql_select_db("checkout", $con);
$result = mysql_query("SELECT * FROM root_mem ORDER BY id");

echo "<table border='1'>
<tr>
<th>Username</th>
<th>Password</th>
</tr>";

while($row = mysql_fetch_array($result))
    {
    echo "<tr>";
    echo "<td>" . $row['username'] . "</td>";
    $rootusername = $row['username'];
    echo '<td bgcolor="#fff">' . $row['password'] . "</td>";

    echo "<td bgcolor=\"red\"><form style=\"margin-bottom:0;\" action=\"root-delrootuser.php\" method=\"post\" name=\"deluser\" onsubmit=\"return DelUserValidate();\"><input type=\"submit\" value=\"Delete User\"><input type=\"hidden\" name=\"delrootuser\" value=\"$rootusername\"><input type=\"hidden\" name =\"adminuse\" value=\"$adminuse\"></form></td>";
    echo "</tr>";
    }
    echo "</table>";
?>

The var clicked=document.forms["deluser"]["delrootuser"].value; section is what is causing my issues as far as I can tell.

If I define this variable as something static, like 'text', everything works when I click the delete button next to the user. I'm prompted to click Ok or Cancel and each one does as expected. If I define it as above, it completely bypasses the function as if it wasn't there. I'd like everyone to see which username they're about to delete however. I at first thought it wasn't passing the $rootusername variable, so I replaced it in the form fields with the username I was test deleting at the time and it still bypassed the function. Any ideas on what I'm missing?

Answer 1

For some reason, I kept getting an error saying that DelUserValidate wasn't defined, so I used jQuery to attach the function to the submit event. Here's a jsFiddle to play with.

$('#yourFormID').submit(function() {
    var clicked = document.forms.deluser.delrootuser.value;
    return confirm("Are you sure you want to delete this user: " + clicked);
});

Answer 2

I was still unable to get it to work even with the jquery stuff you provided me, though it will probably come in handy for some other things later. I did however finally figure out my issue.

After alot of reading and becoming more familiar with server side vs client side, I learned that referencing a PHP variable within a javascript function doesn't seem to work. Probably a few more ways of doing it, but after some experimentation, I opened PHP tags within the onsubmit and echoed a window.confirm, referencing a PHP variable that way. My final code looked something like this and worked like a charm.

<td bgcolor="red"><form style="margin-bottom:0;" action="root-delrootuser.php" method="post" name="deluser" onsubmit="<?php echo "<script>window.confirm('blah, blah blah'" . $variable . "');</script>";?><input type="submit" value="Delete User"><input type="hidden" name="delrootuser" value="$rootusername"><input type="hidden" name ="adminuse" value="<?php echo $adminuse;?>"></form></td>