'increment button in php using session does not work [duplicate]

This is my PHP code. My backwardCallFunction and forwardCallFunction do not work. The number displayed in:

<div class= 'call-count'>Call Count:  <?php echo $_SESSION['callCount'];?></div>

Still the same. Anyone can help me solve the problem?

<?php
session_start();
$_SESSION['callCount'] = 0;

function forwardCallFunction()
{
    $_SESSION['callCount']++;
}

function backwardCallFunction()
{
    $_SESSION['callCount']--;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet"
          href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"/>
    <title>Document</title>
</head>
<body>
<div class='home-middle-subcontent'>
    <div class='to-left' onclick="<?php backwardCallFunction(); ?>"><span class="material-symbols-rounded">keyboard_double_arrow_left</span>
    </div>
    <div class='call-count'>Call Count: <?php echo $_SESSION['callCount']; ?></div>
    <div class='to-right' onclick="<?php $_SESSION['callCount']++; ?>"><span class="material-symbols-rounded">keyboard_double_arrow_right</span>
    </div>
</div>
</body>
</html>
phphtmlsession


Solution 1:[1]

Change

<?php
session_start();
$_SESSION['callCount']=0;

to this

<?php
session_start();
if (!isset($_SESSION['callCount']) {
    $_SESSION['callCount']=0;
}

Otherwise you will reset the counter every time you access the page.

Once done, you need to rework the html part of your script (javascript and php are not communicating the way you try to do).

Change

<div class='to-left' onclick="<?php backwardCallFunction(); ?>"><span class="material-symbols-rounded">keyboard_double_arrow_left</span>
</div>

to

<a class="to-left" href="?to-left"><span class="material-symbols-rounded">keyboard_double_arrow_left</span></a>

and

<div class='to-right' onclick="<?php $_SESSION['callCount']++; ?>"><span class="material-symbols-rounded">keyboard_double_arrow_right</span>
</div>

to

<a class="to-right" href="?to-right"><span class="material-symbols-rounded">keyboard_double_arrow_right</span></a>

Using the a tag and skinning it as a DIV with CSS is way simpler (and usual) than the opposite way.

Once you have done, you need to read the user action using the uri you get and perform the needed action:

<?php

function forwardCallFunction()
{
    $_SESSION['callCount']++;
}

function backwardCallFunction()
{
    $_SESSION['callCount']--;
}

session_start(); 
if (!isset($_SESSION['callCount']) {
    $_SESSION['callCount']=0;
}
$action = $_SERVER['QUERY_STRING'];
if ($action == 'to-left') backwardCallFunction();
if ($action == 'to-right') forwardCallFunction();
?><!DOCTYPE html>

The mechanism of php/javascript interaction is just this simple (ajax obfuscate a bit the process but the way it works is the same):

  • PHP create a page served to the client browser
  • the user interacts with Links and Buttons and send data to php via the url query string
  • PHP read the query string (as I have done or via the $_GET / $_POST / $_REQUEST superglobals)
  • the PHP script take every action needed to check the user input against input data tampering and user misbehavious (aka XSS attack and similar
  • PHP create a page served to the client browser and so on

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions