How do I call an array inside a session array in this 3 part PHP registration form

Question

This is my first question here. Please understand that I'm teaching myself so what I'm doing might not make ANY sense. If you have any questions as to why I did something, please feel free to ask me why or correct me if it is not sound practice.

I tried to make a 3 part form using $_SESSIONS to transfer over the data. 

1) I am able to display everything except the checkbox I’ve made in page 2. I want it to display at the end:

You are interested in: html, css

If I check the checkboxes for html and css. How do I write code to do that

2) I coded this using a mix of tutorials and Google and, while the parts seem to somewhat work, I know the coding style is ‘newbie.’ If you have any suggestions on how to improve usability or coding style, please let me know.

3) When I refresh page 4, I see that I lose some data because I am calling session_destroy(). Is there any way to make the page display: “If you refresh, you will lose data”?

I've google searched what I can to make my project mostly functional and I'm just stuck on this part.

Page 1:

<?php include_once('header.php'); ?>

     <div id="main">
        <div id="form">
            <form action="page2.php" method="post">
            <h1 style="font-family: Verdana"> Step 1: Contact Information </h1>
              <?php
                $style = 'margin: 15px 0px 15px 0px; padding-top: 5px; padding-bottom: 5px;';
                required_text('name', 'name', 'Your Name', '80', 'Enter your name', $style);


                $style = 'margin: 15px 0px 15px 0px; padding-top: 5px; padding-bottom: 5px;';
                required_email('email', 'email', 'Your E-mail', '80', 'Enter your email', $style);

                submit('Go To Step Two', 'primary-button'); ?>
            </form>
        </div>
     </div>

     <div id="footer" style="text-weight: bold; font-family: impact; color: white; margin-top: 50px; font-size: 25px; text-align: center;">
          &copy; FocusedOnSomething
     </div>
  </div>
</div> 
</body>
</html>

Page 2

     <?php include_once('header.php') ?>

     <?php 
        if (! empty ($_POST)) {
            $_SESSION['name'] = $_POST['name'];
            $_SESSION['email'] = $_POST['email'];
         }

     ?>

     <?php print_r($_SESSION); ?>
     <div id="main">
        <div id="form">
            <form method="post"action="page3.php">
            <h1 style="font-family: Verdana"> Step 2 </h1>
               <label class="checkbox-inline" for="interests">

         <?php 
               $options = array(
                      'html' => 'html',
                      'javascript' => 'javascript',
                      'css' => 'css',
                      'php' => 'php',
               );

         checkbox('interests', 'interests', 'Select Your Interests', $options); 
         submit('Go To Step Three', 'primary-button');
         ?>         

            </form>







        </div>
     </div>

     <div id="footer" style="text-weight: bold; font-family: impact; color: white; margin-top: 50px; font-size: 25px; text-align: center;">
          &copy; FocusedOnSomething
     </div>
  </div>

Page 3

<?php include_once('header.php'); ?>

<?php
     if (! empty($_POST)){
         $_SESSION['interests'] = $_POST['interests'];
     }

?>

<?php print_r($_SESSION); ?>
     <div id="main">
        <div id="form" style="height:420px">
            <form method="post"action="page4.php">
            <h1 style="font-family: Verdana"> Step 3 </h1>
              <?php
                $style = 'margin: 15px 0px 15px 0px; padding-top: 5px; padding-bottom: 5px;';
                required_text('address', 'address', 'Address', '80', 'Your Address Goes Here', $style);

                $style = 'margin: 15px 0px 15px 0px; padding-top: 5px; padding-bottom: 5px;';
                required_text('city', 'city', 'City', '80', 'Your City Goes Here', $style);

                $style = 'margin: 15px 0px 15px 0px; padding-top: 5px; padding-bottom: 5px;';
                required_text('state', 'state', 'State', '80', 'Your State Goes Here', $style);

              ?>
            <?php submit('Go To Step Four', 'primary-button'); ?>
            </form>

        </div>
     </div>

     <div id="footer" style="text-weight: bold; font-family: impact; color: white; margin-top: 50px; font-size: 25px; text-align: center;">
          &copy; FocusedOnSomething
     </div>
  </div>
</div>
</body>
</html>

Page 4

<?php
include_once('header.php');

$insert = array();
// Store data from page 1 in session
if ( ! empty( $_POST ) ) {
  $_SESSION['address'] = $_POST['address'];
  $_SESSION['city'] = $_POST['city'];
  $_SESSION['state'] = $_POST['state'];

  $insert_id = $_SESSION;
  $insert = array();
}

?>
  <section id="form">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="form-container">
            <h3 class="heading">Finished</h3>
            <?php if ( ! empty( $insert_id ) )  {
                  $insert = $_SESSION;
                  session_destroy();

                  if (! isset($insert['name'])) { $insert['name'] = 'no name entered';}
                  if (! isset($insert['email'])) { $insert['email'] = 'no email entered';}
                  if (! isset($insert['address'])) { $insert['address'] = 'no address entered';}
                  if (! isset($insert['city'])) { $insert['city'] = 'no city entered';}
                  if (! isset($insert['state'])) { $insert['state'] = 'no state entered';}
                  if (! isset($insert['interests'])) { $insert['interests'] = 'no interests entered';}

                  echo "<pre> <h4>You submitted the following:<h4>";

                  echo "<br>Your name: " . $insert['name'];
                  echo "<br> Your email:" . $insert['email'];
                  echo "<br>Your address: " . $insert['address'];
                  echo "<br> Your city " . $insert['city'];
                  echo "<br> Your state " . $insert['state']; 
                  echo "<br> You are interested in :" . $insert['interests'][0] . $insert['interests'][1] . $insert['interests'][2] . $insert['interests'][3]; 


            } else {
                  echo "No data was submitted";
            }

              ?>


          </div>
        </div>
      </div>
    </div>
  <section>

header.php

<?php
    error_reporting(E_ALL); 
    ini_set('display_errors', 1);  
    require_once('config.php'); 
    require_once('functions.php');
    session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Three Part Form</title>
   <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<div id="container">
    <div id="header">
        <br> 
    </div>

  <div id="content">
     <div id="nav">
            <a href="page1.php" id="button">Page 1</a>      
            <a href="page2.php" id="button">Page 2</a>      
            <a href="page3.php" id="button">Page 3</a>
     </div>

functions.php

<?php

   function __($text) {
     return htmlspecialchars($text, ENT_COMPAT);
   }

   /*  ENT_COMPAT converts double quotes and leaves single quotes alone and htmlspecialchars encodes certain characters so users cannot insert harmful HTML codes into a site */

   function checked($value, $array) {
     if ( in_array( $value, $array ) ) {
       echo 'checked="checked"';
     }
   }

   function required_text( $name, $id, $label, $size, $placeholder,  $style, $type = 'text') {?>
        <div class="form-group">
              <label for="<?php echo $id; ?>"><?php echo $label . '<br>'; ?></label>
              <input type="<?php echo $type; ?>" name="<?php echo $name; ?>" size="<?php echo $size; ?>"  class="form-control"
                    id="<?php echo $id; ?>" placeholder="<?php echo $placeholder; ?>"
                    value="<?php echo isset($_SESSION[$name]) ? __($_SESSION[$name]) : ''; ?>" style="<?php echo "$style" ?>" required
              >
        </div>
    <?php }

    function text( $name, $id, $label, $placeholder, $type = 'text' ) {?>
      <div class="form-group">
        <label for="<?php echo $id; ?>"><?php echo $label; ?></label>
        <input type="<?php echo $type; ?>" name="<?php echo $name; ?>" class="form-control"
              id="<?php echo $id; ?>" placeholder="<?php echo $placeholder; ?>"
              value="<?php echo isset($_SESSION[$name]) ? __($_SESSION[$name]) : ''; ?>">
      </div>
    <?php }


    function required_email( $name, $id, $label, $size, $placeholder,  $style, $type = 'email') {?>
        <div class="form-group">
              <label for="<?php echo $id; ?>"><?php echo $label . '<br>'; ?></label>
              <input type="<?php echo $type; ?>" size="<?php echo $size; ?>" name="<?php echo $name; ?>" class="form-control"
                    id="<?php echo $id; ?>" placeholder="<?php echo $placeholder; ?>"
                    value="<?php echo isset($_SESSION[$name]) ? __($_SESSION[$name]) : ''; ?>" style="<?php echo "$style" ?>" required
              >
        </div>
    <?php }

    function submit($value = 'submit', $class = 'button') {?>
        <input type="submit" id="<?php echo $class; ?>" value="<?php echo $value; ?>";>
    <?php }

    function checkbox( $name, $id, $label, $options = array() ) {?>
      <div class="form-group">
        <p><?php echo $label; ?></p>
        <?php foreach ( $options as $value => $title ) : ?>
          <label class="checkbox-inline" for="<?php echo $id; ?>">
            <input type="checkbox" name="<?php echo $name; ?>[]" value="<?php echo $value; ?>" <?php isset($_SESSION['interests']) ? checked($value, $_SESSION['interests']) : ''; ?>>
            <span class="checkbox-title"><?php echo $title; ?></span>
          </label>
        <?php endforeach; ?>
      </div>
    <?php }
?>

config.php

<?php
    define('DB_NAME', 'snippets');
    define('DB_USER', 'root');
    define('DB_PASS', '');
    define('DB_HOST', 'localhost');
?>

styles.css

#container {
  background-color: #99ccff;
  width: 100vw;
  height: 100vh;
  margin: -10px;
  padding: -10px;
}

.form-control {
  font-size: 18px;
  padding: 10px 15px;
  height: auto;
}

#nav {
  background-color: #99ccff;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  height: 10%;
  text-align: center;
}

#primary-button {
  margin-top: 5px;
  padding: 8px 8px 8px 8px;
  background-color: #f29e10;
  font-weight: bold;
  font-family: verdana;
}

#button {
  background-color: #99ccff;
  margin-top: 150px;
  padding-top: 0px;
  margin-right: 25px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-decoration: none;
}

#form {
  background-color: white;
  height: 320px;
  width: 800px;
  margin: auto;
  padding: 20px 40px 20px 40px;
  margin-top: 40px;
  font-family: sans-serif;
}

#formbutton:hover {
  background-color: red;
}

I can call "javascript" if only javascript is checked in page 2 by echoing $insert['interests'][0] but I'm not sure how to call multiple values if html css and javascript is checked in page 2.

Answer 1

The values of your checkboxes are stored in an array in $_POST, and you'll need to loop over them to get a value for each:

// Initialise interest list as empty string
$interestList = '';

// Loop through checked interests
foreach($_POST['interests'] as $interest){
    // Add checked interest to string containing list of interests
    $interestList .= $interest . ', ';
}

// Remove last comma and space from interest list
if(strlen($interestList)) {
    $interestList = substr($interestList, 0, -2);
}

In order to pop up a warning regarding refreshing the page, you'll want to use window.onbeforeunload somewhere in your javascript. Browser compatibility for this is patchy, and might not give you the result you want.

Stack Overflow answer for pop-up on refresh

MDN web docs for window.onbeforeunload (compatibility)

Regarding coding style:

Coding style is a matter of opinion, so we can't really give you an answer on Stack Overflow. Your code's readable and understandable which is a really good start. I think, generally, the consensus is use a lot of comments and more controversially use some frameworks.

Just keep in mind that the secondary goal in programming, aside from making a thing that works, is producing code which other programmers can read, and code which will make sense to you when you come back to it in 6 months time after having completely forgotten about it.