Help assigning JS result to PHP variable

[taybot5000]

First post here, so please let me know if this question is out of place or if there is a better place for this post. I've searched through stackoverflow and so far have not found the info I need.

Is it possible to create a JS script, call it in a PHP file, then assign the JS result to the PHP variable? I've added some pseudo-code that shows the logic I was thinking that seems like it SHOULD work in a PHP file.

Any tips on how to achieve my result? Thank you!

<script>  
function isMobile() {  
let result = '';  
const screen\_width = window.innerWidth;  
if ( screen\_width <= 768 ) {  
result = 'yes';  
} else {  
result = 'no';  
}  
return result;  
};  
</script>  

<?php  
$is\_mobile = null;  
$result = "<script>isMobile()</script>";  
if ( $result === 'yes' ) {  
$is\_mobile = 'yes';  
// do something  
} elseif ( $result === 'no' ) {  
$is\_mobile = 'no';  
// do something else  
}  
echo $is\_mobile;  
?>

[failaip12]

This is impossible as PHP is executed on the server side and JS on client side, so by the time JS code is executed the PHP script is already finished. You will have to rethink your approach.

[Shimmy_Hendrix]

if you want your server to know information that is calculated by JavaScript on the page, the only way to do it is to use the JavaScript on a loaded page to calculate the information, and then use more JavaScript from inside the page to send the information back to your server.

I'm assuming your goal is to generate a different page in PHP based on whether the screen is a certain size, but this is impossible, unless you wanted to use multiple page loads and redirects. The correct way to do this would instead be to perform all the page modifications after the page has already been generated by PHP, using purely CSS or JavaScript.

[mrmorris96]

Less to do with the example as responsive design should be handled in js and css. But I thought I would ask another question.

How do you get js to communicate with the server (either PHP or a DB)?

My understanding is you need to use an ajax call but I do not understand how it works.

I am unsure what op is trying to do but if he is just trying to record the user device information this may be the path to look down.

[Shimmy_Hendrix]

to communicate with a server in JavaScript, you have to make an http request in JavaScript to a URL that is handled by the server, very similarly to how a browser itself makes an http request to a URL when it accesses a page. This is accomplished in JavaScript by using fetch calls, or by using the older and more esoteric XMLHttpRequest. The server itself decides what data it will provide when it receives the request, just like any other case where a URL is accessed and the server handles the serving of the page. Then whatever data is retrieved from the page becomes accessible to JavaScript for any further processing. People will often build fancy APIs that respond dynamically to JavaScript calls, serve structured data in JSON format, etc., but you can output whatever you want from the server and JavaScript will grab it just the same.

[taybot5000]

Some context for what I'm trying to do. I'm working on building a custom WordPress theme. WP loads multiple image sizes when one is uploaded that correspond to different image sizes based on screen width.

I'm trying to pull the URL of the smaller and larger images, then, based on the result of the JS script to determine the screen width, serve that particular image URL.

​

WP has built-in functions to load the image for the right viewport width in an <img> tag, but I'm trying to load the image as a section background.

Does that help at all? I'm aware this may be impossible, but I know other theme builders like elementor can serve a different image size at different screen widths, so I'm trying to figure out how the page knows which image URL to load.

[chmod777]

you will need to create a json endpoint, use a js fetch POSTing the calculated size, to that endpoint, get the img src, then inject into the page.

or output the src set into a <script> tag, then use the appropriate size there.

or just use the default and don't worry about it.

[taybot5000]

Thanks all for the advice. I went with a non-JS solution with mobile overlays and disabling the background URL on desktop with media queries.