Add variable from session to another session using ajax

Question

I am new to JavaScript and and trying to pass a session variable from 'Name' which has a variable already assigned using PHP and pass it into 'cartItem' upon button click.

To my knowledge the current code stores the value of 'Name' into var item then requests HTML to the server to return and update the session variable 'cartItem' with the value stored in var item.

Button and script:

<button id='addToCart' onclick='addToCart'>Add to cart</button>
                        <script>
                            function addToCart(){
                                var item = sessionStorage.getItem('Name');
                                item = new XMLHttpRequest();
                                item.onreadystatechange = function(){
                                    if (this.readyState == 4 && this.status == 200){
                                        sessionStorage.setItem('cartItem', item);
                                    }          
                                }
                            }
                        </script>

cartItem is then displayed in my navbar using a function which is called across all pages

                        <span class='item-info'>
                        <span>" . $_SESSION['cartItem'] . "</span>
                    </span>

But it does not show. Any advice would be greatly received.

Answer 1

If I understand correctly, you are using a sessionStorage object to store PHP session variable values on the Javascript / HTML document, correct? If so, then understand that when you try to change a value, you are only changing it on the client side, the server side (or PHP side) remains unaffected).

It looks like you have the right idea with the XMLHttpRequest, but in order to get done what you need to do, you'll need to make a PHP script which the Javascript function will ajax to. Here's a little mockup:

<?php
//NOTE: this does not do any input sanatation

//name of this script is changeVal.php
$keyAr = ["Name","Price","Value","Other"];
if (in_array($_POST['key'],$keyAr) {
    $_SESSION[$_POST['key']] = $_POST['val'];   
}

I am intentionally using an array in this manner rather than $_SESSION[$_POST['key']] so that a potential hacker can't change the value of ANY session variable.

Once you have the script above, you can make an ajax request onto that script, where key is the name of the var to change and val is the value to change it to.

NOTE: this does not perform any sanatation or protection for the input material. This is just a simple mockup.

Answer 2

You have created an XMLHttpRequest object but have not opened a URL or sent the request.

Example (not tested):

var name = sessionStorage.getItem('Name');
var item = new XMLHttpRequest();
item.open("GET", "http://www.example.com/endpoint/" + name);
item.send();

After this, the object "item" will contain information such as the response body and HTTP status code.