We Keep Coding

Assign to a Javascript variable the member's database id

On my webpage, when the user logs in, he stays on the same page:
echo '<form action="" method="POST" class="Form">';
I want to keep the database id of the user in a Javascript variable:
if (Session::isLoggedIn())
{
echo '<script>';
echo ' let memberId = "' . (string)($_SESSION['memberId']) . '";';
echo '</script>';
}
Unfortunately, when the user logs in, my let memberId = "' . (string)($_SESSION['memberId']) . '"; doesn't appear in the client side source code (the page doesn't seem to be as reloaded as I expected).
So what can I do to keep the database id of the user in a Javascript variable?

If none of your code appears, then Session::isLoggedIn() is not true when you user has logged in.
Then, are you sure that $_SESSION['memberId'] contains the id_user when he is logged in?
I would also find it more clear, if you pass the id otherwise, first to html:
<input type="hidden" name="memberId" value="<?php echo $_SESSION['memberId'] ?>"
and then in JS
let memberId = document.getElementsByName("memberId")[0].value;

Passing a PHP variable using Javascript Void 0 as the HREF?

I am creating a page that allows a user to edit a user. The table gives me the row ID which is in the button shown below. It works fine when having it direct to another script. However, I wanted to open the users details dynamically which this program does.
Although I don't understand where to place the $row to have the page be able to access it? My research was more about just passing between both programs when I just need to link it up.
I just want this to when the button is pressed, send the $row['usersid'] variable to the page which I can then use.
EDIT: It seems I've confused both myself and you all. I want to keep this in PHP if possible. All I need is the $row['usersid'] or a variable that stores it which is in PHP currently. To be sent to the page without it refreshing.
echo "<td><a href='javascript:void(0);' onClick=".$row['usersid']."' id='showButton'><span class='glyphicon glyphicon-edit'></span></a></td>";
echo "<td><a href='javascript:void(0);'".$row['usersid']."' id='showButton'><span class='glyphicon glyphicon-edit'></span></a></td>";

There are many ways to pass the information in page to another one, let me list some of them:
approach
echo "<td><a href='/path_to_another_php_page.php?userId=$row['usersid']' onClick= id='showButton'><span class='glyphicon glyphicon-edit'></span></a></td>";
then you can access to this information searching in $_GET['userId'].
If your want to use this userId, only for make ajax request, you could do simply doing:
echo "<td><a href='javascript:void(0);' data-user-id='$row['usersid']' onClick= id='showButton'><span class='glyphicon glyphicon-edit'></span></a></td>";
as you can see I added a data-user-id attribute that contains the real userId from php, so in your Javascript you can do this:
document.getElementById("showButton").addEventListener("click", function(){
var userId = this.getAttribute("data-user-id");
// here you can call your ajax ...
}, false);
I hope this be useful for you.

if you want to check your value then use this code which you get your value
you can also get data using this code
<?php
$row['usersid'] = 10; // fot test case
$row['usersid1'] = 13; // fot test case
?>
<script type="text/javascript">
$(document).on('click', '.getValue', function(){
// send data to PHP
var id = this.getAttribute("userId");
alert(id)
});
</script>
<?php
echo "<td><a href='javascript:void(0);' class = 'getValue' userId = ".$row['usersid']." id='showButton'>Button</a></td>";
echo "<br>";
echo "<td><a href='javascript:void(0);' class = 'getValue' userId = ".$row['usersid1']." id='showButton'>Button</a></td>";
this is second option
<script type="text/javascript">
function getValue(value){
alert(value)
}
</script>
<?php
echo "<td><a href='javascript:void(0);' onClick=getValue(".$row['usersid'].") id='showButton'>Button</a></td>";

Clickable HTML list to query db and output to <div>

Bear with me; this is my first StackOverflow question. I'm having trouble writing a proper algorithm. Perhaps doing all this to "force" it means I'm over-complicating a simple concept, but it's also very likely I'm just unaware of the fix.
I'm building an experimental cookbook that reads from a database and displays in the browser. I created a list (note: NOT a <ul> or <ol> element) that is populated by <span> items generated by a PDO query to the database. These spans reference the name of each recipe in the database.
<p>
<?php
$recList = $pdo->query('SELECT name FROM Recipe');
$rowCount = $recList->rowCount();
echo 'There are ' . $rowCount . ' recipes currently in our database!';
echo '<br /><br />';
while ($row = $recList->fetch()) {
echo '<span class="recName"';
echo '>' . $row['name'] . "</span><br />";
}
?>
</p>
I then created a scrolling div element:
<div id="recWindow">
<!-- Display recipe queried from the database here -->
<?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>
I would like the user to be able to click on the recipe names generated by php and the chosen recipe to display within the <div>. Choosing different recipes should not cause the page to reload.
I feel like the answer lies in an AJAX request to a php file listening for a variable containing the recipe to display, but that's where I'm stuck. Somehow I need to pass the php list items a unique identifier that is recognized by javascript, which in turn handles the onclick change in the div by passing that identifier BACK to php to query the database. While typing that out, I'm almost certain that I've over-complicated this entire process.
I thought of using a dropdown select menu and a GET request, but I'd like to retain the clickable names function if possible.
Answers that conclude my proposed method is too "dirty" and point me in a better direction are completely acceptable. I'm happy to provide any necessary information I left out. Thank you so much in advance.
Environment: Virtual LAMP (CentOS7, MariaDB)

Try something like this
<p>
<?php
$recList = $pdo->query('SELECT name FROM Recipe');
$rowCount = $recList->rowCount();
echo 'There are ' . $rowCount . ' recipes currently in our database!';
echo '<br /><br />';
while ($row = $recList->fetch()) {
echo '<span class="recName" data-id="' . $row['id'] . '"';
echo '>' . $row['name'] . "</span><br />";
}
?>
</p>
<div id="recWindow">
<!-- Display recipe queried from the database here -->
<?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("body").on("click", "recName", function() {
//* get id of required recipe
var recId = $(this).attr("data-id");
//* send ajax-request to back-end
$.ajax({
url: "/get-recipe.php",
method: "GET",
data: {
id: recId
},
success: function(respond) {
//* put recipe-data into container
$("#recWindow").html(respond);
}
});
});
});
</script>
I hope, it shows you the main idea

How to fire a javascript function after setting a radio button value with a mysql query result when the page loads

I'm using php & mysql (with a pinch of javascript). This is a simple "edit" form, that auto-fills the various elements from data in a table. On the form is a set of radio buttons which are set by the data when the page loads. As in the "add new" form, this "edit' form has javascript functions which are triggered by onclick(), which display either another set of radio buttons or a text entry box, when the user makes a selection. (That part works just fine.)
How can I trigger/fire these scripts to display the appropriate elements automatically when the page loads? (Really don't want to delve into the jQuery arena at this time - as I need to get this piece of the project wrapped up ASAP.)
echo "<tr>";
echo "<td align=right>Transport: </td>";
echo "<td><input type=radio id=transppnd name=transp value='pnd'";
// $prepdel: var holding 1 or 0 from database table field
if($prepdel>0){
echo "checked";
}
echo" onclick='showpnd()'>Prep & Deliver";
echo " <input type=radio id=transpcpu name=transp value='cpu'";
// $prepdel: var holding 1 or 0 from database table field
if($prepdel<1){
echo "checked";
}
echo " onclick='showcpu()'>Customer pickup</td>";
echo "</tr>";

Looks like you want to call your showcpu() and showpnd() methods on page load. Just add a script like this at the bottom of your html page:
<script type="text/javascript">
showpnd();
showcpu();
</script>
</body>
I don't know php but maybe something like this?
if($prepdel>0){
echo "<script type="text/javascript">showpnd();showcpu();</script>";
}
*****************************UPDATE********************************
echo "<input type=hidden id=porc name=porc value='$prepdel'>";
<script type="text/javascript">
if(document.getElementById("porc").value > 0)
{
showpnd();
showcpu();
}
</script>
</body>

Passing a PHP Function (With parameters) through an HTML Button

Basically, I'm trying to create a login system, and I'm using it what I call "Dynamically" meaning it's included from my other files, and if I wanted to use a different database I would simply pass that database to the login function. I know how to do this by default, but as soon as using a button came in I got a little confused.
Here's what I have in it's most basic form.
<?php
createLogin('test', 'test2');
function createLogin($SQLConnection, $SQLConfig) {
echo "<h1> You are currently not logged in!</h1>";
echo "<form action='handleLogin(".$SQLConnection.",".$SQLConfig.") method='post'>";
echo "<div align='center'>";
echo "<table style='width: 475px'>";
echo "<thead>";
echo "<th>";
echo "<tr>Enter your e-mail and password.</tr>";
echo "</th>";
echo "</thead>";
echo "</table>";
echo "<input type='submit' value='Login' />";
echo "</form>";
}
function handleLogin($foo, $bar) {
echo $foo . " || " . $bar;
}
?>
When I click the submit button however, it simply takes me here...
http://localhost/handleLogin%28test,test2%29%20method=
Now, I read about using Javascript to do this, and to do something like
<script>
function processLoginRequest($SQLConnection, $SQLConfig) {
alert("<?php handleLogin($SQLConnection, $SQLConfig) ?>");
}
</script>
Then I could use
echo "<form action='processLoginRequest(".$SQLConnection.",".$SQLConfig.") method='post'>";
However, the code causes the entire php script to die. (Without error?)

You're using action incorrectly, and the result is as expected. action stores the page to which the form will be submitted. So, yes, when you hit submit it is trying to take you to a page called handleLogin%28test,test2%29%20method= because that is what your action says to do.
What you can do is simply leave the action blank, which will submit the form to the current page. Then, on that page, check if the form has been submitted, and if so, call your function.
Inside the function that creates the form make these changes:
function createLogin() {
...
echo "<form action='' method='post'>";
....
echo "<input type='submit' value='Login' name='login'/>";
}
Then, at the top of the page that renders the form, add something like this:
// Check if login form has been submitted - if so, handle
if (isset($_POST['login'])) {
handleLogin($SQLConnection, $SQLConfig);
}
// Render login form. No need to pass config parameters here.
createLogin();
If you really want to keep everything in a single function, I suppose you could also do it like this:
function createLogin($SQLConnection, $SQLConfig) {
if (isset($_POST['login'])) {
handleLogin($SQLConnection, $SQLConfig);
}
else {
echo "<h1> You are currently not logged in!</h1>";
echo "<form action='' method='post'>";
echo "<div align='center'>";
echo "<table style='width: 475px'>";
echo "<thead>";
echo "<th>";
echo "<tr>Enter your e-mail and password.</tr>";
echo "</th>";
echo "</thead>";
echo "</table>";
echo "<input type='submit' value='Login' name='login'/>";
echo "</form>";
}
}

You do NOT want to pass your SQL Configuration parameters back to JavaScript, because anyone can look at your JavaScript code when they browse your page, and then they'll have everything they need to connect and play around in your database.
You will have to pass some kind of flag to your form, to let your PHP code know (when it receives the form's data later) what kind of SQL settings it should use.
Example:
<form method="POST" ...>
<type input="hidden" name="loginMode" value="<?php echo $loginMode; ?>" />
</form>
Again, don't pass any sensitive data in there, just have some kind of unique value like "mySql" for $loginMode or the other options.
And then, when you're handling the HTTP POST in your PHP:
if ($_POST['loginMode'] == 'mySql')
{
// ... create connection based on $SQLConnection, $SQLConfig
}
else if ($_POST['loginMode'] == 'otherMethod') ...

Your JavaScript is probably failing because of the the contents of $SQLConnection and $SQLConfig. If you have a double quote in them it would fail.
Also designing and implementing a safe and robust login system is actually pretty difficult and you should opt using a framework that has been tested over time.