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:

Create a variable (based on what the user clicked on in a pie chart)
Send that variable to PHP using AJAX
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!

I think your problem is in dataType, as you are sending json, but defining html. Try with dataType: 'json' — DekiChan
– DekiChan, Commented Oct 5, 2016 at 7:59
The echoed values are in the Ajax result (which here is called data) — apokryfos
– apokryfos, Commented Oct 5, 2016 at 8:02

madalinivascu · Accepted Answer · 2016-10-05 08:06:10Z

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 :)

answered Oct 5, 2016 at 8:06

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

helpmeplz Over a year ago

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

Rax Weber · Accepted Answer · 2016-10-05 07:58:51Z

1

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.

answered Oct 5, 2016 at 7:58

Rax Weber

3,78121 silver badges30 bronze badges

Comments

Farhad · Accepted Answer · 2016-10-05 08:03:05Z

0

you should change this code

'itemNum' : itemNum,

to this

itemNum : itemNum,

answered Oct 5, 2016 at 8:03

Farhad

2,0231 gold badge18 silver badges29 bronze badges

3 Comments

Rax Weber Over a year ago

There is nothing wrong with or without having quotes.

Farhad Over a year ago

@RaxWeber but it happened to me , while the variables had quotes in php I couldn't get them , after removing it worked !

Rax Weber Over a year ago

Well, PHP is different from JavaScript.

pradeep1991singh · Accepted Answer · 2016-10-05 08:20:08Z

0

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);
      }
    });

answered Oct 5, 2016 at 8:20

pradeep1991singh

8,4054 gold badges24 silver badges31 bronze badges

Comments

anuraj · Accepted Answer · 2016-10-05 08:51:15Z

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
?>

Collectives™ on Stack Overflow

Send variable from Javascript to PHP using AJAX post method

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related