How to use AJAX to POST to PHP?

As I asked here I would like to know how I could pass the data from a simple JS function to php, and log it there.

I found this answer and tried to follow it. This is my code right now (both in the same file)

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script>
</head>

<body>

    <script>
        function getClientScreenResolution() {
            var screenResolutionW = screen.width; 
            var screenResolutionH = screen.height;
            console.log(screenResolutionW + ' ' + screenResolutionH)
            $.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})
        }
    </script>

    <script type="text/javascript">
        getScreenResolution();
    </script>

</body>
</html>

JavaScript
​x
 
<html><head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script></head>​<body>​    <script>        function getClientScreenResolution() {            var screenResolutionW = screen.width;             var screenResolutionH = screen.height;            console.log(screenResolutionW + ' ' + screenResolutionH)            $.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})        }    </script>​    <script type="text/javascript">        getScreenResolution();    </script>​</body></html>​

<?php

$screenResolutionW  = $_POST['screenResolutionW'];
$screenResolutionH  = $_POST['screenResolutionH'];

if(isset($_POST['screenResolutionW'])) {
   $fh = fopen('log.txt', 'a');     
   fwrite($fh, 'Screen res: '."".$screenResolutionW .'x'."".$screenResolutionH 
."rn");
   fclose($fh);
}
?>

JavaScript
 
<?php​$screenResolutionW  = $_POST['screenResolutionW'];$screenResolutionH  = $_POST['screenResolutionH'];​if(isset($_POST['screenResolutionW'])) {   $fh = fopen('log.txt', 'a');        fwrite($fh, 'Screen res: '."".$screenResolutionW .'x'."".$screenResolutionH ."rn");   fclose($fh);}?>​

However, this does not work. I wouldn’t know how to fix this, whenever I try to google this problem people use more advanced methods, that I wouldn’t even know how to start with.

Edit: My PHP and HMTL are in the same file (index.php). Edit 2: Removed old code for clarity.

This results in these error messages:

Notice: Undefined index: screenResolutionW in index.php on line 153

Notice: Undefined index: screenResolutionH in index.php on line 154

JavaScript
 
Notice: Undefined index: screenResolutionW in index.php on line 153​Notice: Undefined index: screenResolutionH in index.php on line 154​

Answer

What you want to do with $.post is include your data like this:

$.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})

JavaScript
 
$.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})​

where the first of the pair is the POST identifier (the ['screenResolutionW']) and the second of the pair is the variable value.

You will also want to change your POST identifiers to be quoted:

$screenResolutionW  = $_POST['screenResolutionW'];
$screenResolutionH  = $_POST['screenResolutionH'];

JavaScript
 
$screenResolutionW  = $_POST['screenResolutionW'];$screenResolutionH  = $_POST['screenResolutionH'];​

Otherwise, you will get a warning about constants. I have also corrected the spelling in these variables, to reflect what you’re trying to write into your file.

fwrite($fh, 'Screen res: '."".$screenResolutionW .'x'."".$screenResolutionH ."rn");

JavaScript
 
fwrite($fh, 'Screen res: '."".$screenResolutionW .'x'."".$screenResolutionH ."rn");​

EDIT

Part of the problem is that you never call the function to execute it. Here is your HTML with the additions I have suggested, plus calling the function:

EDIT TWO

Added an onload handler for the document:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script>
</head>

<body>

    <script>
        function getScreenResolution() {
            var screenResolutionW = screen.width; 
            var screenResolutionH = screen.height;
            console.log(screenResolutionW + ' ' + screenResolutionH);
            $.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})
        }
    </script>

</body>
<script type="text/javascript">
    $(function() { 
        getScreenResolution();
    });
</script>
</html>

JavaScript
 
<html><head>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script></head>​<body>​    <script>        function getScreenResolution() {            var screenResolutionW = screen.width;             var screenResolutionH = screen.height;            console.log(screenResolutionW + ' ' + screenResolutionH);            $.post("index.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})        }    </script>​</body><script type="text/javascript">    $(function() {         getScreenResolution();    });</script></html>​

OTHER NOTES

You really should separate the PHP code and place it in a different file because when you run the page as it is now you should get one line logged that has no variables when the page initially runs, then one logged line when the JavaScript fires after the page loads.

Then once separated you should not run your PHP until you test for the existence of a variable, for example:

if(isset($_POST['screenResolutionW'])) {
    // your code to write to the file here
}

JavaScript
 
if(isset($_POST['screenResolutionW'])) {    // your code to write to the file here}​

EDIT THREE

I placed all of the JavaScript in the same script block in the head of the file and have tested again:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script>
    <script type="text/javascript">
    $(function() { 
        function getScreenResolution() {
            var screenResolutionW = screen.width; 
            var screenResolutionH = screen.height;
            console.log(screenResolutionW + ' ' + screenResolutionH);
            $.post("post_test.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})
        }
        getScreenResolution();
    });
    </script>
</head>

<body>

</body>
</html>

JavaScript
 
<html><head>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> </script>    <script type="text/javascript">    $(function() {         function getScreenResolution() {            var screenResolutionW = screen.width;             var screenResolutionH = screen.height;            console.log(screenResolutionW + ' ' + screenResolutionH);            $.post("post_test.php", {screenResolutionW: screenResolutionW, screenResolutionH: screenResolutionH})        }        getScreenResolution();    });    </script></head>​<body>​</body></html>​

Here you can see the variables are being posted:

Advertisement

Answer