How to give PHP variable to Javascript?
Question
I am searching for a better way to send my PHP variable to Javascript. Currently I echo the variable in PHP:
<script>
var numbers = <?php echo $numbers ?>;
</script>
I then access this variable in Javascript like this: class.method(numbers);
My PHP file is included in the index.php before the javascript file, so I have access to this variable in the javascript file.
Now I am looking for a nicer way to submit the PHP variable than using echo . Does anyone have an idea?
The output of numbers looks like:
5 answers
solution1
1 2021-01-15 09:50:57
If you want to mix your php with JS.the one you have used is better.also you can try something like this Add a display none span to your html page with id:document_target example
<span id="document_target" style="display: none;"><?=$numbers;?></span>
in js file get data of span with id
var myNumber = document.getElementById("document_target").textContent;
solution2
1 2021-01-15 09:54:49
You can use an inline script tag to add data to the HTML document like this:
const dataElement = document.querySelector('#phpData'), data = JSON.parse(dataElement.text); console.log(data.example, data.number);
<script type="text/plain" id="phpData"> { "example": "Example string", "number": 10 } </script> <script type="text/plain"> { "someValue": <?=$some_value?>, "otherValue": <?=$other_value?> } </script>
As can be seen, when running the example, the script with inappropriate JS type attribute is not executed.
In that script tag you can echo variables or other values as you need (like in the latter example), or even echo a json_encode d string. This is one of the safest way to include PHP variables to JS, and you can still save your actual JavaScript into an external file. The data script must be included in the HTML document, because you can't access.js files with PHP, and also, for security reasons, JS can't read text from an external file.
What comes to the usage of echo , it's a PHP language construct specifically meant to add content to the markup, there's no reason to avoid it. I've used a short hand of echo in the latter example, but it still is echo .
solution3
0 2021-01-15 09:54:07
One better alternative would be to output the PHP value to a data attribute. Given that this variable doesn't seem to be tied to a specific element, you could put it at root level on the body element. Then you can read it from there when the JS executes once the DOM has loaded, like this:
<body data-numbers="<?php echo $numbers ?>">
<!-- your HTML ... -->
</body>
let numbers = document.body.dataset.numbers; // plain JS
let numbers = $('body').data('numbers'); // jQuery
This is under the assumption that the $numbers variable in your PHP is holding a value which can be coerced to a string
-- Update --
Given the edit to your question where you clarify that $numbers in fact contains an object, you can instead encode it to JSON, output it to a <script> tag and then use it from there:
<script type="text/plain" id="numbers">
<?= $json_encode($numbers) ?>
</script>
let numbers = JSON.parse(document.querySelector('#numbers').textContent.trim()); // plain JS
let numbers = JSON.parse($('#numbers').text().trim()); // jQuery
solution4
0 2021-01-15 11:59:45
Here is a possible way to do this:
Get the values from the form fields if there's a form, or whatever and send them in a query to php from JS, this work regardless where the php file is, it can be a remote file on a different server, or just another local page,etc.
The php file receives the request and reply back
retrieve the reply of the php file in the JS.
An example of the above using jquery:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
$(document).ready(function(){
$("#submit_button").change(function(){
var my_id = "some value here, or do some getelement by id .val()..."
$.ajax({
url: 'includes/forms.php', //or replace with a remote url
method: 'post',
data: { some_requestPHP_name: my_id } //note this line
}).done(function(data){
console.log(`js got from php =${data}` )
//
var numbers = data;
})
})
})
Now in the php file you need to make the file react whenever it recieves something containing the line I indicated above containing some_requestPHP_name , this is a parameter that you decide
if (isset($_POST["some_requestPHP_name"])) echo some_function(); // you can use the "some_requestPHP_name" just as a trigger to call the some_function of you can use the data from it
function some_function(){
// do things and return the number;
return 1;
}
Depending on your usage you may not have a form/button etc so you may want to remove the.change() and execute the function right away, at this point it's up to you to adapt the example to your needs.
solution5
0 2023-01-11 07:38:53
Well, I did it like this:
<script src="./assets/scripts/tableActions.js"></script> <!-- JS SCRIPT -->
<table class="w-full" id="table">
<thead>
<tr><th class='border-b p-2 w-52 border-gray-400'>Full Name</th><th class='border-b border-l p-2 w-52 border-gray-400'>Username</th><th class='p-2 border-l border-b w-36 border-gray-400'>Role</th><th class='p-2 border-l border-b border-gray-400'>E-mail</th></tr>
</thead>
<tbody>
<?php
include('./functions/connectSQL.php');
$sql = "SELECT * FROM users";
$result = mysqli_query($con, $sql);
$x = 1;
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr class='hover:bg-gray-800 cursor-pointer' onClick='returnValues(".$x.");' id='tableRow'><td class='border-t p-2 px-4 border-gray-400' id='fullnameCell'>" .$row["fullname"] . "</td><td class='border-l border-t p-2 px-4 border-gray-400' id='usernameCell'>".$row["username"]."</td><td class='border-l border-t p-2 px-4 border-gray-400' id='roleCell'>" . $row["role"] . "</td><td class='border-l border-t p-2 px-4 border-gray-400' id='emailCell'>" . $row["email"] . "</td></tr>";
$x++;
}
mysqli_close($con);
?>
</tbody>
</table>
See, that onClick='returnValues(".$x.");' have inside itself variable from PHP. So you will give varibale to javascript using function. Now it is like you probably know:
function returnValues(x){
const table = document.querySelector('table');
const cells = table.querySelectorAll('td');
const values = Array.from(cells).map(cell => cell.innerText);
var tableRow = document.getElementById("table").rows;
var form = document.getElementById("form");
const usernameField = document.getElementById('usernameForm');
for (i = 0; i < tableRow.length; i++){
let tableCells = tableRow[x].cells[i].innerHTML;
form.elements[i].value = tableCells;
}
if(values.includes(usernameField.innerText)){
formButtonAdmin.innerText = "Update";
}
}
Now you could be good, when you will have any other questions, feel free to ask:D Have a nice day!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.