How to pass javascript/jQuery variable to PHP using POST method

Question

This is really basic. All I want to do is measure the html width of a browser window, and pass that data to a PHP script so that I can adjust what information is passed to the site.

I've got the HTML width part down. I'm just having trouble passing the Javascript/jQuery variable to the PHP script using AJAX.

Here's the Javascript/jQuery. It is written in PHP so that I can use the include() function later.

echo 
'<script> 
    htmlWidth = $("html").width();
    $.ajax({
        type: "POST",
        url: "mobileView.php",
        data:{ width: htmlWidth }
    }) 
</script>';

And here's the PHP:

$width = $_POST['width'];
function mobileView(){
    if ($width < 950){
        return true;
    } else{
        return false;
    }
}
mobileView();

If you're just trying to determine whether to use mobile site or not, you could use a pre-made detection script that can be found all over the web. — ArtOfCode, May 10 '14 at 16:48
@martynas this isn't a duplicate. I checked that post and I was unable to find the answer to this question there. — Solomon Arnett, May 10 '14 at 17:35
@CaolanEvans The site that I am creating has specific dimensions for certain divs and instead of creating multiple CSS files, i'd much rather create two: one for the site's full version, the other for, not only if someone is viewing the site on mobile, but also if the window is resized smaller than 950px, such as when someone pins a tab to the left or right side of their screen in windows and linux. — Solomon Arnett, May 10 '14 at 17:37
Fair enough. However, if someone pins the window while the site is displayed you run into problems unless you detect it. Just a hint. You can use jQuery's `$(window).resize(function() {...});` to handle this, using the same code you have above. — ArtOfCode, May 10 '14 at 17:43
@CaolanEvans yes. Thank you. I'm familiar with the $(window).resize function. However I have had some issues in the past with calling it inside the $(document).ready(function(){}); do you suggest calling the function outside of d-ready?^ — Solomon Arnett, May 10 '14 at 17:45
Let me have a look at one of my projects - I use it quite a lot. I'll get back to you in a couple of minutes. — ArtOfCode, May 10 '14 at 18:04
Shouldn't be a problem. I call it inside d-ready and it still works :) — ArtOfCode, May 10 '14 at 18:05
There's a link to that particular instance [here](http://www.riversparrow.co.uk/js/script.js). — ArtOfCode, May 10 '14 at 19:03

score 7 · Accepted Answer · answered May 10 '14 at 16:43

7

Here is the code that can be function within a file:

For PHP part, you should pass value to the function and call the function.

I guess you need return data to the client from the php function return. Then, for ajax part, you have to catch the return data.

<?
if(isset($_POST['width'])){
    $width = $_POST['width'];

    function mobileView($width){
        if ($width < 950){
            echo 'true';
        } else{
            echo 'false';
        }
    }
    mobileView($width);

}else{
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script> 
    htmlWidth = $("html").width();
    $.ajax({
        type: "POST",
        url: "mobileView.php",
        data:{ width: htmlWidth }, 
        success: function(data){
            console.log(data); 
        }
    })
</script>

<?
};

?>

answered May 10 '14 at 16:43

Thank you. This worked perfectly. Now this may be a dumb question, but why does the "echo"s print to the console rather than the html? What I want to do is print data to the html file based on what information is passed from ajax. – Solomon Arnett May 10 '14 at 16:56
this code will not let me use the include function in php, it just returns all of the data to the console. – Solomon Arnett May 10 '14 at 20:23
@Solomon Arnett What do you mean include function in php? A file include this or this file include another? – May 11 '14 at 01:56

score 1 · Answer 2 · answered May 10 '14 at 16:52

Try this.

Your AJAX

htmlWidth = $("html").width();
$.ajax({
    type: "POST",
    url: "mobileView.php",
    data:{ width: htmlWidth, somevar : "yes" },
    success: function(data){
        console.log(data); 
    }
})

Your PHP

if(isset($_REQUEST['somevar'])){
     $width = $_POST['width'];

    function mobileView($width){
        if ($width < 950){
            echo 'true';
        } else{
            echo 'false';
        }
    }
    mobileView($width);
}

How to pass javascript/jQuery variable to PHP using POST method

2 Answers2

Linked