3

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.

  • 2
    `checkbox('interests', 'interests', 'Select Your Interests', $options);` is not standard php, it's referring to some framework. BTW, we can help you much better if you narrow the scope of your question to one thing. – Tim Morton Sep 24 '19 at 01:51
  • @TimMorton: He defined his own `checkbox` function in his `functions.php`. – Koala Yeung Sep 24 '19 at 03:39
  • 1
    @ d234kdsafjk: Not bad for beginner :-) But I think it'd be easier for us to answer (and for you to debug) if you can specifically tell us which step bugs you. Which step did you get unexpected result? What was your expected result? – Koala Yeung Sep 24 '19 at 03:44
  • @KoalaYeung Ah, you are correct; I didn't look closely enough. The OP is obviously finding some good samples. Reminds me of ruby on rails. – Tim Morton Sep 24 '19 at 18:27

1 Answers1

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.

Joundill
  • 6,828
  • 12
  • 36
  • 50
  • @d234kdsafjk did this answer your question? – Joundill Sep 29 '19 at 01:29
  • 1
    Yes, thank you. I guess the checkbox values had to be looped over. Now how do I credit you for the answer? I clicked the arrow up. – d234kdsafjk Sep 29 '19 at 05:21
  • Cheers. It's not the loop that's important here, the values come back as an array. Technically, you could just check for each value you're expecting in the array and add them in statically. This would be a better solution if the form is an important one, or valid results are limited and important. Technically, somebody could send some dodgy data to your form, and you'd end up parroting it back to them with my solution. If you created a new checkbox element in the Chrome Inspector with the same name, but some dodgy HTML/JS in the value, it would be reflected by your code to the user. – Joundill Oct 01 '19 at 02:07