js variables to PHP using AJAX

Question

trying to send the javascript variables x and y from play.php in a PHP page xyz.php using AJAX but not being able to do so. could you guys be kind and tell me what's wrong here?

function clicked(evt){
            var e = evt.target;
            var dim = e.getBoundingClientRect();
            var x = evt.clientX - dim.left;
            var y = evt.clientY - dim.top;

            $( document ).ready(function() {

                $.ajax({
                   type: "POST",
                   url: 'play.php',
                   data: {X: x },
                   success: function(data)
                   {
                      alert("success! X:" + data);
                   }

                 });

              });
}

and in xyz.php

<?php 
   if (isset($_GET["X"])) {
     $x = $_GET["X"];
     echo $x;
   }else{
     echo 'no variable received';
   }
?>

you're doing a POST request and you're getting at your php file by GET method. — Jose Rojas, May 13 '16 at 13:59
You are using POST method in your AJAX call, so you have to check $_POST in your php script instead of $_GET. — labzus, May 13 '16 at 14:02
How is `clicked` being called? Why is `$( document ).ready(function() {` *inside* that function? — gen_Eric, May 13 '16 at 14:05
Possible duplicate of [Pass Javascript variable to PHP via ajax](http://stackoverflow.com/questions/15461786/pass-javascript-variable-to-php-via-ajax) — Pedro Lobito, May 13 '16 at 14:07
How do you pretend `clicked` function be called? can you post your HTML code — Jose Rojas, May 13 '16 at 14:07
i want that when i click that rectangle it should send the x & y coordinates as variables to xyz.php and from there i want them to be stored in my db. — muzibaloutche, May 13 '16 at 14:32

score 0 · Answer 1 · answered May 13 '16 at 13:59

0

You are sending your data using "POST" and accepting using "GET"

Please rewrite PHP code like below

<?php 
if (isset($_POST["X"])) {
    $x = $_POST["X"];
    echo $x;
}else{
    echo 'no variable received';
}
?>

And check if it working

answered May 13 '16 at 13:59

Arun

3,640
7
44
87

@muzibaloutche, alert the value of x in javascript. What it is showing? – Arun May 13 '16 at 14:12
still nothing. i can see this from console: play.php:49 Uncaught ReferenceError: $ is not defined for this line: $( document ).ready(function() { – muzibaloutche May 13 '16 at 14:21
you have to include jquery library before start your jquery code. You will get it from https://developers.google.com/speed/libraries/#hammerjs. as per the docs add in the head tag of your html page – Arun May 13 '16 at 14:35
did that as well. still nothing, Arun. – muzibaloutche May 13 '16 at 14:49

Jose Rojas · Answer 2 · 2016-05-13T15:59:20.647

0

according to your HTML you can bind on click as is shown below, here the example working you have 2 mistakes in your code the first, the event ready is fired when your window is loaded so this must be outside:

$( document ).ready(function() {
   //svg selector you can adapt it what you need
   $('svg').on('click', function(evt){
     var e = evt.target;
     var dim = e.getBoundingClientRect();
     var x = evt.clientX - dim.left;
     var y = evt.clientY - dim.top;

     $.ajax({
       type: "POST",
       url: 'play.php',
       data: {X: x },
       success: function(data)
       {
           alert("success! X:" + data);
       }

     });  
   });
});

And Second you're getting the parameters by GET, they should be gotten by POST.

if (isset($_POST["X"])) {
 $x = $_POST["X"];
 echo $x;
}else{
  echo 'no variable received';
}

edited May 13 '16 at 15:59

answered May 13 '16 at 14:02

Jose Rojas

3,490
3
26
40

with your method I am getting everything that is written on that particular page as a long n lengthy alert message(all my script of the page) which is bigger than the size of my screen with no close button. I had to force quit eclipse n then relaunch it to be able to work again. – muzibaloutche May 13 '16 at 16:12
set id to the element and get it with the selector: ` – Jose Rojas May 13 '16 at 16:25

score 0 · Answer 3 · answered May 13 '16 at 14:03

0

Your PHP Script should be :

<?php 
    if ( isset($_POST["X"]) ) {
        $x = $_POST["X"];
        echo $x;
   }else{
       echo 'no variable received';
   }
?>

answered May 13 '16 at 14:03

labzus

137
1
5

score 0 · Answer 4 · answered May 13 '16 at 15:51

This is a blend of a couple different solutions. I received error messages when binding the <g> svg element directly with the onclick event. So I took a little more indirect route. I added an id tag to the <g> element and then created the jQuery listener for a click event on that and then called the function. Here's a jsfiddle: https://jsfiddle.net/aedo6pmc/2/

Here's the svg element:

<svg xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="500" height="500"> <g transform="translate(30 30)" id="gSquare"><rect id="rect1" x="0" y="0" width="50" height="50" fill="red"/></g> </svg>

And the javascript:

$( document ).ready(function() {
    $('#gSquare').on('click', function(e){
        e.preventDefault();
        clicked(e);
    });

    function clicked(evt){
        e = evt.target;
        dim = e.getBoundingClientRect();
        x = evt.clientX - dim.left;
        y = evt.clientY - dim.top;
        console.log(x + ' ' + y);

        $.ajax({
            type: "POST",
            url: 'play.php',
            data: {X: x },
            success: function(data)
            {
                alert("success! X:" + data);
            }
        });
    }
});

Just noticed Jose updated his answer to include the same type of approach. He binds it directly to the svg element which may be enough, but be sure that if your page has more than one svg on the page, that you want the same behavior for each svg.

I am still unable to echo x in my other php page plus with your solution, I can see the x and y in console but in the other html page, it's still "no variable received" being echoed, plus the alert window with "success X:" is still huge with all the script of the page in it. — muzibaloutche, May 14 '16 at 09:31

js variables to PHP using AJAX

4 Answers4