Send variable from Javascript to PHP using AJAX post method

Question

I am trying to pass a variable from javascript to php, but it doesn't seem to be working and I can't figure out why. I am using a function that is supposed to do three things:

1. Create a variable (based on what the user clicked on in a pie chart)
2. Send that variable to PHP using AJAX
3. Open the PHP page that the variable was sent to

Task one works as confirmed by the console log.
Task two doesn't work. Although I get an alert saying "Success", on test.php the variable is not echoed.
Task three works.

Javascript (located in index.php):

 function selectHandler(e) {
 // Task 1 - create variable
 var itemNum = data.getValue(chart.getSelection()[0].row, 0);
 if (itemNum) {
 console.log('Item num: ' + itemNum);
 console.log('Type: ' + typeof(itemNum));
 // Task 2 - send var to PHP
 $.ajax({
 type: 'POST',
 url: 'test.php',
 dataType: 'html',
 data: {
 'itemNum' : itemNum,
 },
 success: function(data) {
 alert('success!');
 }
 });
 // Task 3 - open test.php in current tab
 window.location = 'test.php';
 }
 }

PHP (located in test.php)

 $item = $_POST['itemNum'];
 echo "<h2>You selected item number: " . $item . ".</h2>";

Thanks to anyone who can help!

• DekiChan: I think your problem is in dataType, as you are sending json, but defining html. Try with dataType: 'json'
• Rax Weber: @DekiChan dataType is the response type.
• apokryfos: The echoed values are in the Ajax result (which here is called data)

Answer 1

From what i can tell you don't know what ajax is used for, if you ever redirect form a ajax call you don't need ajax

See the following function (no ajax):

function selectHandler(e) {
 // Task 1 - create variable
 var itemNum = data.getValue(chart.getSelection()[0].row, 0);
 if (itemNum) {
 console.log('Item num: ' + itemNum);
 console.log('Type: ' + typeof(itemNum));
 window.location = 'test.php?itemNum='+itemNum;
 }
 }

change:

 $item = $_GET['itemNum'];
 echo "<h2>You selected item number: " . $item . ".</h2>";

or better you do a simple post request from a form like normal pages do :)

• helpmeplz: Yeah I had to learn PHP very fast for an assignment. It worked perfectly. Than you!!! :)

Answer 2

Try this:

success: function(data) {
 $("body").append(data);
 alert('success!');
}

Basically, data is the response that you echoed from the PHP file. And using jQuery, you can append() that html response to your body element.

Answer 3

you should change this code

'itemNum' : itemNum,

to this

itemNum : itemNum,

• Rax Weber: There is nothing wrong with or without having quotes.
• Farhad: @RaxWeber but it happened to me , while the variables had quotes in php I couldn't get them , after removing it worked !
• Rax Weber: Well, PHP is different from JavaScript.

Answer 4

Seems contentType is missing, see if this helps:

 $.ajax({
 type: 'POST',
 url: 'test.php',
 dataType: "json", 
 data: {
 'itemNum' : itemNum,
 },
 contentType: "application/json",
 success: function (response) {
 alert(response);
 },
 error: function (error) {
 alert(error);
 }
 });

Answer 5

you can easily pass data to php via hidden variables in html for example our html page contain a hidden variable having a unique id like this ..

<input type="hidden" id="hidden1" value="" name="hidden1" />

In our javascript file contains ajax request like this

 $.ajax({
 type: 'POST',
 url: 'test.php', 
 data: {
 'itemNum' : itemNum,
 }
 success: function (data) {
 // On success we assign data to hidden variable with id "hidden1" like this
$('#hidden1').val(data);
 },
 error: function (error) {
 alert(error);
 }
});

Then we can access that value eighter on form submit or using javascript

accessing via Javascript (Jquery) is

var data=$('#hidden1').val();

accessing via form submit (POST METHOD) is like this

<?php
$data=$_POST['hidden1'];
// remaining code goes here
?>