I am currently working on a telecontrol application in which I am trying to send joystick coordinates from Javascript to PHP. However, I am never able to access the data via the PHP file as I get an Undefined Index error.
I am aware that this question has been addressed many times, but I have spent the past week going through forums and Google and none of the solutions I have tried have worked, so I would appreciate it if someone could take a look at my code to see if I have some fundamental misunderstanding or application-specific problem.
EDIT: I forgot to mention this earlier, but I had tried some example PHP/AJAX code that others have posted online, and running that code did not work either, which makes me think that maybe this is a problem with my server configuration.
My Code: (Only includes files I believe to be relevant to the problem; if you would like to see the other files in the project, plase let me know.) The JavaScript and PHP files are in the same directory. I am using XAMPP.
joystick.js (Contains ajax call)
var hasGP = false;
var repGP;
// Joystick State Variables
var triggerPressed;
var x_value;
var y_value;
var z_value;
var t_value;
function canGame()
{
return "getGamepads" in navigator;
}
function reportOnGamepad()
{
// Display the gamepad's ID.
var gp = navigator.getGamepads()[0];
var html = "";
html += "<u>ID</u>: " + gp.id + "<br>";
// Display the status of the x-axis.
x_value = gp.axes[0];
html += "<u>x-axis</u>: " + x_value + "<br>";
// Display the status of the y-axis.
trigger_pressed = gp.buttons[0].pressed;
y_value = gp.axes[1];
if (trigger_pressed)
{
html += "<u>Pitch angle</u>: " + y_value + "<br>";
}
else
{
html += "<u>y-axis</u>: " + y_value + "<br>";
}
// Display the status of the z-axis.
z_value = gp.axes[3];
html += "<u>z-axis</u>: " + z_value + "<br>";
// Display the status of the t-axis.
t_value = gp.axes[2];
html += "<u>Roll angle</u>: " + t_value + "<br>";
$("#gamepadDisplay").html(html);
$.ajax({ url: 'ajax.php',
type: 'POST',
data: {x:x_value},
success: function(data)
{
console.log("x_value " + data + " has been sent to the server.");
}
});
}
$(document).ready(function()
{
if(canGame())
{
var prompt = "To begin using your gamepad, connect it and press any button!";
$("#gamepadPrompt").text(prompt);
$(window).on("gamepadconnected", function()
{
hasGP = true;
$("#gamepadPrompt").html("<b>The gamepad has been successfully connected.</b><br><br>");
console.log("connection event");
repGP = window.setInterval(reportOnGamepad,100);
});
$(window).on("gamepaddisconnected", function()
{
console.log("disconnection event");
$("#gamepadPrompt").text(prompt);
window.clearInterval(repGP);
});
// Set up an interval for Chrome
var checkGP = window.setInterval(function()
{
console.log('checkGP');
if(navigator.getGamepads()[0])
{
if(!hasGP) $(window).trigger("gamepadconnected");
window.clearInterval(checkGP);
}
}, 500);
}
});
ajax.php (File to which Javascript data should be sent)
<?php
$temp = $_POST['x'];
if(isset($temp) && !empty($temp))
{
echo "x value is ". $temp ."!"; // Success Message
}
?>
Error Message:
Notice: Undefined index: x in C:\xampp\htdocs\TeachMoverInterface\ajax.php on line 2
The PHP $_POST array appears to be empty.
Possibly Helpful Browser Debugging Info:
As I said, I have been looking at forums for the past week, so some of the actions I tried in order to fix the problem have been to change formatting, change cache and async attributes in the ajax method, substitute the ajax call with a $.post call or XMLHttpRequest, replacing the JavaScript variable with a number in the ajax call, and some other methods I have forgotten.