Can i carry PHP variables over into an HTML or Javascript file

I’m new to PHP and am trying to create an Age Validation form that will limit access to specific content on a site if a user is under a certain age.

This is the HTML form (index.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="data.php" method="POST">
      <input type="date" name="date" />
      <input type="submit" name="submit" />
    </form>
  </body>
</html>

and this is the PHP script(data.php):

<?php  //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page

   $date2=date("Y-m-d");//today's date

   $date1=new DateTime($_REQUEST['date']); //user date
   $date2=new DateTime($date2);

   $interval = $date1->diff($date2); //check diff between dates

   $myage= $interval->y; //resulting age

  if ($myage >= 16){  //full access to website is granted
     $_SESSION[$limited] = false;
     header('Location: ../index.php');
   }else{ //limited access is granted
      $_SESSION[$limited] = true;
     header('Location: ../index.php');
   }

  }else{ //if result page page is loaded without form submission
      echo "Return to start page";
  }

  ?>

   <form action="index.html"> <!--Return to form page-->
      <button type="submit">Return</button>
   </form>

I would like to be able and carry the resulting $limited variable from the PHP file into this HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript">
        function myFunction () {
            var access = <?php echo $limited ?>;

            var txt = document.createElement('h1');
            txt.innerHTML = access;
            document.body.appendChild(txt);
        }

        myFunction();


    </script>
  </body>
</html>

This is currently just for testing to make sure it can carry over. I have tried the $_SESSION method but i can’t seem to figure it out.

Any and all possible solutions welcomed.

Thank you

Answer

First, your HTML file must be parsed by the PHP interpreter so it must have the .php extension in order to access any session variable.

Here’s an example with 3 files in the same directory based on your question:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="data.php" method="POST">
      <input type="date" name="date" />
      <input type="submit" name="submit" />
    </form>
  </body>
</html>

data.php:

<?php  //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page

   $date2=date("Y-m-d");//today's date

   $date1=new DateTime($_REQUEST['date']); //user date
   $date2=new DateTime($date2);

   $interval = $date1->diff($date2); //check diff between dates

   $myage= $interval->y; //resulting age

  if ($myage >= 16){  //full access to website is granted
     $_SESSION['limited'] = false;
     header('Location: new.php');
   }else{ //limited access is granted
      $_SESSION['limited'] = true;
     header('Location: new.php');
   }

  }else{ //if result page page is loaded without form submission
      echo "Return to start page";
  }

  ?>

   <form action="index.html"> <!--Return to form page-->
      <button type="submit">Return</button>
   </form>

new.php(the new page, where you access your session variable)

<?php 
session_start();

$limited = $_SESSION['limited'] ?? true;

?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript">
        function myFunction () {
            var access = <?php echo $limited ? "true" : "false" ?>;

            var txt = document.createElement('h1');
            txt.innerHTML = access;
            document.body.appendChild(txt);
        }

        myFunction();


    </script>
  </body>
</html>

Advertisement

Answer