We Keep Coding

Get a variable from a concatenated variable PHP and JavaScript

I'm not sure how to title this post properly... But I hope you can still help!
<?php
$result = rand(1, 898);
include_once($_SERVER['DOCUMENT_ROOT'].'/016-name.inc.php');
$con = "number".$result;
?>
<h2>Guess That Pokemon!</h2>
<p>Guess the following Pokemon by it's image only.</p>
<input type="text" placeholder="Guess" style="width:75%;" onkeyup="guess()" id="inputGuess"/>
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/<?=$result?>.png" />
<script>
function guess(){
var inputGuess = document.getElementById('inputGuess');
if (inputGuess.value == '<?=$con?>'){
alert('Correct');
}
}
</script>
Inside /016-name.inc.php (shortened for the sake of simplicity, but you can see where I'm going...)
<?php
$number1 = "bulbasaur";
$number2 = "ivysaur";
$number3 = "venusaur";
$number4 = "charmander";
$number5 = "charmeleon";
$number6 = "charizard";
$number7 = "squirtle";
$number8 = "wartortle";
$number9 = "blastoise";
$number10 = "caterpie";
What I'm trying to do is get the inputted result in JavaScript, and then try to match the word they enter for the number in the variable.
for example, if the input is Squirtle then I need to try and find the variable of the pokemon number and convert it to the pokemon name to check if it's correct.
This is what it's returning:
Expected behaviour:
I've had quite a bad history with posts on stack overflow not being specific enough, etc, but I hope this is enough to try and fix my problem.
Thanks,
Kaden

I think you should use the so called variable/dynamic variable :
https://www.php.net/manual/en/language.variables.variable.php
using the double dollar sign $$
function guess(){
var inputGuess = document.getElementById('inputGuess');
if (inputGuess.value == '<?=$$con?>'){
alert('Correct');
}
}
Let's put it simply :
$result = rand(1, 898); // let say it worths 421 when the code is run
$con = "number".$result; // so it will worth "number421"
$$con will worth $number421

Thanks to Tangentially Perpendicular for providing the solution in this comment:
Don't store your names in separately numbers variables. Use an array. Then finding the element you want is trivial. See php.net/manual/en/language.types.array.php

HTML form select to drive PHP/SQLSRV results

I'm working on a very basic web page to facilitate data entry. I have it working with PHP talking to SQL Server to both enter and display data. At the simplest level, they'll select a store from a dropdown and enter some data, then hit submit.
I'm trying to dynamically display the last 7 days worth of data when their store is chosen from the form select input. How do I get the Select value to drive the SQL query? I found how to use onchange to fire a javascript function, which I can alert the value. Do I really need to then use jquery or AJAX to link that back to the PHP select query or is there a simpler way to approach this?
I'm trying to learn this all from scratch and am quite admittedly out of my element. Here are some snippets of what I've got:
...
<script>
function OnSelectChange(obj)
{
alert(obj.options[obj.selectedIndex].value);
}
</script>
...
<td align="right">Store</td><td width="125"><select style="width:100%" name="store" onchange="OnSelectChange(this)">
...
<?php
$tsql = "select * from test where DateStamp >= getdate()-7";
$stmt = sqlsrv_query($conn, $tsql);
//generate table view of data
echo "<table>";
echo "<tr><td>Store ID</td><td>Date</td><td>Data</td></tr>";
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC))
{
$StoreID = $row['StoreID'];
$DateStamp = $row['DateStamp'];
$Donations = $row['Data'];
echo "<tr><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
}
echo "</table>";
?>
I've found a lot of helpful information to get me this far, but am stuck now.
Thank you in advance.

Got it! For anyone else looking, here are relevant snippets of code:
<style>
.hideable {
visibility: collapse;
}
</style>
...
<script language="JavaScript">
function OnSelectChange(cl)
{
var els = document.getElementsByClassName('hideable');
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'collapse';
};
var els = document.getElementsByClassName(cl);
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'visible';
};
}
</script>
...
<select style="width:100%" name="store" onchange="OnSelectChange(this.value)">
...
echo "<tr class='hideable ".$StoreID."'><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
Leveraging dual classes upon the table (tr) creation and the collapse CSS style property was key.

how to set value to field populated by php in Javascript

I'm using PHP to populate some anchor tags with data from the database. but after some time I want to change its value with Javascript. but the Javascript value don't change PHP value. any idea? how to achieve this with Javascript?
I don't want to make changes in the database. only change value of the field.
var distance = 0;
if (distance <= 0) {
document.getElementById("valueName").innerHTML = 'Changed by Javascript';
}
<?php
$invoice = find_by_id($_GET['job'], 'job_id', 'job_post_payments');
$address = $invoice['address'];
?>
<p id="valueName"><?php echo $address; ?></p>
// javascript code is below this ^^^

No Issue see fiddle -> http://main.xfiddle.com/bf1876ac/works.php
var distance = 0;
window.onload = function() {
if (distance <= 0) {
document.getElementById("valueName").innerHTML = 'Changed by Javascript';
}
if (distance > 0) {
document.getElementById("testValue").innerHTML = 'Changed by Javascript';
}
}
<div>
<p id="valueName">
<?php echo $address; ?>
</p>
</div>
<div>
<p id="testValue">
<?php echo $address; ?>
</p>
</div>

You need understand, php it's backend technology, and javascript it's frontend technology.
if you use javascript, you need wait while browser will render this HTML part. Browser must create a DOM tree. And only then you can manipulate with this DOM tree by javascript.
So this is example:
var distance = 0;
// wait while browser will create DOM tree
window.onload = function() {
if (distance <= 0) {
document.getElementById("valueName").innerHTML = 'Changed by Javascript';
}
}
<p id="valueName">Random Street</p>

Jquery looped array selectors with custom element ID's

Going through the other posts i must either have something wrong with my code or my logic is fundamentally flawed.
So what happens is i have a series of array elements that get called/written, these array elements need to have sub elements modified by java script.
Everything was workign before i needed to add an array i.e i was using a single element selector ID for the functions below and got the correct results. However after adding unique ID's in a loop it doesn't want to change.
So here's what happens, I have a separate div that is hidden. This prints out how many elements are in the array as its a PHP session variable. $Carray is a count function and works correctly.
<div class="Carray"><?php echo $Carray;?></div>
Then as the items are looped they add an array ID
<?php
$arrayID = -1;
foreach($_SESSION['activity'] as $key){
foreach($key as $list){
$arrayID += 1;
?>
<div id="subP_<?php echo $arrayID;?>" class="booking_action">-</div>
<div id="booking_people_<?php echo $arrayID;?>" class="booking_people_number">
<?php echo $list["i_quantity"] ?>
</div>
<div id="addP_<?php echo $arrayID;?>" class="booking_action">+</div>
<?php }} ?>
Then in Javascript i call a loop function that counts through however many $Carray elements there are and then corresponds the correct function actions to the correct div ID's
//get the counted array variable and force as an int
var js_var = parseInt($('.Carray').html(),10);
// loop for however many array elements there are
for (i = 0; i < js_var; i++){
// get the amount of people from a field
var ppl_P = parseInt($('#booking_people_'+i).html(),10);
// subtract 1 person and then change the output to match the new people count
$("#subP_"+i).click(function() {
if(ppl_P >= 2){
ppl_P -= 1;
$('#booking_people_'+i]).html(ppl_P);
}
});
// Add 1 person and then change the output to match the new people count
$("#addP_"+i).click(function() {
ppl_P += 1;
$('#booking_people_'+i).html(ppl_P);
});
}
****************************** EDIT **********************
So based on Jimmi Elofsson answer which works beautifully, i want to expand this to effect elements that are not inside the parent/child selectors. The selector is '.booking_price_inner' which is another div stored elsewhere. I am assuming the line that needs the correct syntax is the marked line.
The '.booking_base_price' is within the parent/child element.
$(".subPerson").click(function() {
// Subtract Person
var subPeopleCount = getCurrentCountByPeopleItem($(this).parent()) - 1;
$(this).parent().children('.booking_people_number').html(subPeopleCount>1 ? subPeopleCount : 1);
//Change price
var totalPriceS = subPeopleCount * getBasePrice($(this).parent());
$(this).parent().children('.booking_price_inner').html(totalPriceS); <-------
});
$(".addPerson").click(function() {
//Add person
var addPeopeCount = getCurrentCountByPeopleItem($(this).parent()) + 1;
$(this).parent().children('.booking_people_number').html(addPeopeCount);
//Change price
var totalPriceA = addPeopleCount * getBasePrice($(this).parent());
$(this).parent().children('.booking_price_inner').html(totalPriceA); <------
});
// get the number of people in the specific array
function getCurrentCountByPeopleItem(peopleItem) {
return parseInt(peopleItem.children('.booking_people_number').html());
}
//get the base price
function getBasePrice(peoplePrice){
return parseInt(peoplePrice.children('.booking_base_price').html());
}
Markup
<div id="<?php echo $arrayID;?>" class="booking_people">
<div class="booking_date_header">People:</div>
<div class="subPerson booking_action">-</div>
<div class="booking_people_number"><?php echo $list["i_quantity"] ?></div>
<div class="addPerson booking_action">+</div>
<div class="booking_base_price"><?php echo $list["i_base_price"] ?></div>
</div>
<div class=spacer></div>
<div class=cost>
<div class=booking_price_inner></div>
</div>

If you don't mind, I did some changes in your code.
you could make your add/substract element use the same click function with the help of some DOM traversing. That way you wouldnt need the CArray to keep track of the buttons.
Javascript:
// subtract 1 person and then change the output to match the new people count
$(".subPerson").click(function() {
var subPeopleCount = getCurrentCountByPeopleItem($(this).parent()) - 1;// Substract by one.
$(this).parent().children('.booking_people_number').html(subPeopleCount>1 ? subPeopleCount : 1);
});
// Add 1 person and then change the output to match the new people count
$(".addPerson").click(function() {
var addPeopeCount = getCurrentCountByPeopleItem($(this).parent()) + 1; // Increase by one.
$(this).parent().children('.booking_people_number').html(addPeopeCount);
});
function getCurrentCountByPeopleItem(peopleItem) {
return parseInt(peopleItem.children('.booking_people_number').html());
}
PHP:
<?php
$arrayID = -1;
foreach($_SESSION['activity'] as $key){
foreach($key as $list){
$arrayID += 1;
?>
<div class="booking_people_item" id="<?php echo $arrayID;?>">
<div class="subPerson booking_action">-</div>
<div class="booking_people_number">
<?php echo $list["i_quantity"] ?>
</div>
<div class="addPerson booking_action">+</div>
</div>
<?php }} ?>
I added a div wrapper around your elements called booking_people_item.

from what I see - you're definig click functions in a loop. Those click functions have a reference to a ppl_P variable. When you define the click, it seems OK. But when the click is triggered, the ppl_P variable is already set to the value from loops last iteration. So, whenever you call that click function, it always has the same result, doesn't it?
The proper way to do it would be to pass this ppl_P variable as a parameter, so you don't have a reference to a variable that was already changed in the other scope. Something like:
function addClickFunction(i, ppl_P){
$("#subP_"+i).click(function() {
if(ppl_P >= 2){
ppl_P -= 1;
$('#booking_people_'+i]).html(ppl_P);
}
});
// Add 1 person and then change the output to match the new people count
$("#addP_"+i).click(function() {
ppl_P += 1;
$('#booking_people_'+i).html(ppl_P);
});
}
And then use this function inside the loop:
var ppl;
for (i = 0; i < js_var; i++){
ppl = parseInt($('#booking_people_'+i).html(),10);
addClickFunction(i, ppl);
}
This hasn't been tested, but I'm pretty sure you'll get the point :)

populate dropdown onload by passing php array to javascript function

im trying to pass a php array to javascript function onload that will display the js array in a drop down list but now im already doing it for sometime i guess i need to pop it again
first i pass it from one php file to another using this code
header("location: Rules.php?varFields=".serialize($varFields));
secondly i transfer to another variable as it had been passed to the said php file
<?php
$varArray = unserialize($_GET['varFields']);
?>
third part is im tyring to pass it into a jS functon that will then display it to a drop down list
<body id="body" onclick="cmbRuleField(\'' + <?php echo json_encode($varArray);?> + '\');" >
and here is the external javascript code
function cmbRuleField(varArray)//ruleField
{
var varDisplay = JSON.stringify(varArray);
var sel = document.getElementById("ruleField") // find the drop down
for (var i in varDisplay)
{ // loop through all elements
var opt = document.createElement("option"); // Create the new element
opt.value = varDisplay [i]; // set the value
opt.text = varDisplay [i]; // set the text
sel.appendChild(opt); // add it to the select
}
}
for the first two part i already tested it and it is working but for the last parts i cant make it work

I think this part looks suspicious
<body id="body" onclick="cmbRuleField(\'' + <?php echo json_encode($varArray);?> + '\');" >
maybe
<body id="body" onclick="cmbRuleField(<?php echo json_encode($varArray);?>)">
is more like it.
One more tip, you can see the output on the rendered page to determine what the written out code looks like. So if you see something like:
<body id="body" onclick="cmbRuleField('['a', 'b']')">
you know there is a problem. You want a native Javascript array to be passed like this
<body id="body" onclick="cmbRuleField(['a', 'b'])">
EDIT
After talking on chat it became clear the top portion of OP's code needed a tweak as well.
header("location: Rules.php?varFields=".http_build_query($varFields));

The problem has to do with quotes not being terminated here:
...
<body id="body" onclick="cmbRuleField(\'' + <?php echo json_encode($varArray);?> + '\');" >
...
The JSON created using json_encode will have a lot of double quotes. Try this:
<script>
var array = <?php echo json_encode($varArray);?>;
</script>
<body id="body" onclick="cmbRuleField(array);">

There is a much easier way. Encode the $varArray as direct HTML options before sending to the browser. For instance:
<select id="ruleField">
<?php for ($i = 0; $i < count($varArray); $i++) { ?>
<option value="<?php= $varArray[$i].val ?>"><?php= $varArray[$i].name ?></option>
<?php } ?>
</select>

Might be because you are calling JSON.stringify on something that is already a string?
Also what is myCars?
..
for (var i in myCars)
..
Possibly rename it to varArray.
or rename varDisplay to varArray.
and lastly try calling JSON.parse instead:
function cmbRuleField(varArray)//ruleField
{
var varDisplay = JSON.parse(varArray);
var sel = document.getElementById("ruleField") // find the drop down
for (var i in myCars)
{ // loop through all elements
var opt = document.createElement("option"); // Create the new element
opt.value = varDisplay [i]; // set the value
opt.text = varDisplay [i]; // set the text
sel.appendChild(opt); // add it to the select
}
}
If that didn't work post the html output here so peeps can create a fiddle :)