When submitting a form, the page refreshes which resets all session variables

_Unique_ · May 7, 2015

Hello,

I am creating a PHP installer for my website, it is currently only basic because It is my first time building the installer, and I want to make sure that everything works.

So I am using sessions to contain what steps the user is on, and when the user first enters the install page, the session gets created and a Step session variable is also created, forcing the user to start on step 0 (the introduction), once the user starts the install, it will progress to step 2, etc.

So here is my code:

<?php 

    /* Create a new session to hold the step values */
    session_start(); 

    /* Force start on step 0 when page load, via session */
    $step = isset($_SESSION['step']) ? intval($_SESSION['step']) : 0;

    /* Check if the submit button was pressed */
    if(isset($_POST['start-install'])) {
        $step = 1;
    }

    $message = '';
    
?>
<!DOCTYPE html>
<html>

<head>
    <title>CMS Website : Installer</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
    <div id="form-box">
        <?php
            if($step == 0) {
                echo ('
            <h3>CMS Installer</h3>
        <p>You <small>MUST</small> install the website for it to function correctly.</p>
        <form method="post">
            <div align="center"><input type="submit" name="start-install" value="Start Install" style="cursor: pointer;" /></div>
        </form>
            ');
            }else if($step == 1) {
                echo ('
                <h3>CMS Installer ~ Step 1</h3>
                <p>Please fill in the form with the appropriate details</p>
                <form method="post" id="db-form">
                    <input type="text" name="db-host" placeholder="Database Host" />
                    <input type="text" name="db-username" placeholder="Database Username" />
                    <input type="password" name="db-password" placeholder="Database Password" />
                    <input type="text" name="db" placeholder="Database Name" />
                    <input type="submit" name="submit-db" value="Submit Database" />
                </form>
                ');
                if(empty($_POST['db-host'])) {
                    $message = 'You must complete the form!';
                }
            }else if($step == 2) {
                echo ('Create your administrator account!');
            }
        ?>
    </div>
</body>
<script type="text/javascript">
    $('#db-form').submit(function(e) {
        e.preventDefault();
    });
</script>
</html>

So, my problem is when the user clicks the submit button, my script checks if the 'host' box is empty (I will include the rest once this problem is fixed) but instead of displaying the $message variable, the page automatically refreshes and starts back to step 0, resetting the session variables.

As you can see from my script, I attempted to stop the page from refreshing once the form was submitted using Javascript, and that worked, but it stopped my PHP script from functioning correctly, for some reason.

So, if anyone could help me with preferably a fix, or a workaround, that would be great!

Thanks in advanced,

Unique

ginerjm · May 7, 2015

The way to keep from losing your inputs is to use php vars in the value clauses of each input element, hidden or visible. Grab each input value and store it in a php var that is used in the html tag so that when the form is sent back to the client those values are output.

Sample:

echo "<input type='text' name='street' value='$street'>"

where $street is captured during the form receipt by the script:

$street = $_POST['street'];

maxxd · May 7, 2015

At the top of your code, add the following:

if(!empty($_POST)){
	print("<pre>".print_r($_POST,true)."</pre>");
}else{
	print("<p>\$_POST is empty</p>");
}

Just to make sure your post variables are being set like you think they are. The code looks like it should work (of course, I could be overlooking something obvious - I have a new puppy and am a bit sleep deprived), so making sure everything in post is set and indexed as expected should help a bit.

_Unique_ · May 7, 2015

The way to keep from losing your inputs is to use php vars in the value clauses of each input element, hidden or visible. Grab each input value and store it in a php var that is used in the html tag so that when the form is sent back to the client those values are output.

Sample:

echo "<input type='text' name='street' value='$street'>"

where $street is captured during the form receipt by the script:

$street = $_POST['street'];

At the top of your code, add the following:
if(!empty($_POST)){
print("<pre>".print_r($_POST,true)."</pre>");

}else{

print("<p>\$_POST is empty</p>");

}

Just to make sure your post variables are being set like you think they are. The code looks like it should work (of course, I could be overlooking something obvious - I have a new puppy and am a bit sleep deprived), so making sure everything in post is set and indexed as expected should help a bit.

Okay thanks, I will add a line that will store the variables, thats pretty easy.

But what my main problem is, how do I stop it from going back to Step 0?

Muddy_Funster · May 7, 2015

The way to keep from losing your inputs is to use php vars in the value clauses of each input element, hidden or visible. Grab each input value and store it in a php var that is used in the html tag so that when the form is sent back to the client those values are output.

Sample:

echo "<input type='text' name='street' value='$street'>"

where $street is captured during the form receipt by the script:

$street = $_POST['street'];

Actualy, that's only one of the ways not "The way". I would use browser storage for that and not re-render from the server each time.

It's also nothing to do with the actual question.

@Unique : how comfortable are you with jquery and ajax?

_Unique_ · May 7, 2015

Actualy, that's only one of the ways not "The way". I would use browser storage for that and not re-render from the server each time.

It's also nothing to do with the actual question.

@Unique : how comfortable are you with jquery and ajax?

Well, I have never used AJAX before and I know the basics of javascript. But I am always open to learn new languages

Thinking about it, more and more, I am starting to believe I made a huge mistake building it server side, I did originally build it from Javascript, but it got messy, real quick, but it worked. So I thought making it server side would be easier, but its not.

Edited May 7, 2015 by _Unique_

_Unique_ · May 7, 2015

Okay,

I have so far created this script:

<script>
    $(document).ready(function() {
        
        var step = '0';
        
        localStorage.setItem('stepValue', step);
        
        localStorage.getItem('stepValue');
        
        $('#start-install').click(function() {
            var step = '1';
            alert(step);
            localStorage.setItem('stepValue', step);
        });
    });
</script>

It works great, when I click the #start-install button, the variable 'step' changes to two, which is what I wanted, but again it wont save and keep the variables when the page is refreshed.

Please tell me where I am going wrong with this.

Thanks in advance

Muddy_Funster · May 8, 2015

With AJAX you don't need the full page to be refreshed. You can keep the counter in the js variable and load up the content into a div for each step.

<script>
function loadNextStep(step){
  step = step++;
  $.ajax({
    url:"path/to/yourPHPpage.php?step="+step,
    type:"get",
    success: function loadContent(data){
      $.('#idOfDiv').html(data);
    },
    failure: function displayError(e){
      alert(e);
    }
  });
}

You can do the same for a "previous step" aswell. even calling it in the failure sub-function if you want to. Add to this that you can, as mentioned before, store all form info in the browser storage so you can pre-populate anything that is re-loaded.

mac_gyver · May 8, 2015

you are making this much harder than it needs to be. you should also post in the javascrpt forum section if you are going to be using js/ajax.

the reason your session variable isn't working is due to a logic error. there's no code setting or modifying the session variable. see the following sample code for how you could manage the process using php -

<?php 

    /* Create a new session to hold the step values */
    session_start(); 

    /* Force start on step 0 when page load, via session */
    if(!isset($_SESSION['step'])){
        $_SESSION['step'] = 0;
    }

 // form processing code
 if($_SERVER['REQUEST_METHOD'] == "POST"){

    $errors = array(); // store any errors in this array
    $data = array_map('trim',$_POST); // get a trimmed copy of the form data
    
    /* Check WHICH form processing code to run */
    switch($_SESSION['step']){
        
        case 1: // step 1 form processing code
            
            // validate the form data


            //$errors[] = 'empty host name'; // dummy error for demo purposes
            
            // if no validation errors, use the form data
            if(empty($errors)){
                // do something with the submitted data from this step
                
            }
        break;
        
        // processing code for the remaining steps would go here
        case 2:
            
        break;
    
    }
    
    // if there are no errors at this point, advance to the next step and do a header() redirect to the exact same url of this page to cause a get request
    if(empty($errors)){
        $_SESSION['step']++;
        $host = $_SERVER['HTTP_HOST'];
        $uri = $_SERVER['REQUEST_URI'];
        header("Location: http://$host$uri");
        exit;
    }
    // if there are errors, the code will continue and display the html document, where you would
    // display any errors, redisplay the current step's form, with any previous values
}
    
    // any get method code would go here to get/produce data that the page needs,
    // such as if you are editing existing settings, to retrieve them and set the $data array with them
    //  if the $data array doesn't already exist
    
?>
<!DOCTYPE html>
<html>

<head>
    <title>CMS Website : Installer</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
    <div id="form-box">
        <?php
        // display any errors
        if(!empty($errors)){
            echo "Correct the following errors:<br>";
            foreach($errors as $error){
                echo "$error<br>";
            }
        }
        
        switch($_SESSION['step']){
            case 0:
                echo '
            <h3>CMS Installer</h3>
        <p>You <small>MUST</small> install the website for it to function correctly.</p>
        <form method="post">
            <div align="center"><input type="submit" value="Start Install" style="cursor: pointer;" /></div>
        </form>
            ';
            break;
            case 1:
                // note: to display any initial/existing form field data, test if the corresponding field
                // in the $data array isset() and echo it as needed to populate the form fields
                // this would be much easier if you dynamically built (and processed) each form by having a definition in an array that you simply step through
                echo '
                <h3>CMS Installer ~ Step 1</h3>
                <p>Please fill in the form with the appropriate details</p>
                <form method="post">
                    <input type="text" name="db-host" placeholder="Database Host" />
                    <input type="text" name="db-username" placeholder="Database Username" />
                    <input type="password" name="db-password" placeholder="Database Password" />
                    <input type="text" name="db" placeholder="Database Name" />
                    <input type="submit" value="Submit Database" />
                </form>
                ';
            break;
            
            // display code for the remaining steps would go here
            case 2:
            
            break;
        }
        ?>
    </div>
</body>
</html>

_Unique_ · May 8, 2015

With AJAX you don't need the full page to be refreshed. You can keep the counter in the js variable and load up the content into a div for each step.
<script>
function loadNextStep(step){
  step = step++;
  $.ajax({
    url:"path/to/yourPHPpage.php?step="+step,
    type:"get",
    success: function loadContent(data){
      $.('#idOfDiv').html(data);
    },
    failure: function displayError(e){
      alert(e);
    }
  });
}
You can do the same for a "previous step" aswell. even calling it in the failure sub-function if you want to. Add to this that you can, as mentioned before, store all form info in the browser storage so you can pre-populate anything that is re-loaded.

Sorry, I dont fully understand the coding, please could you break it up, explaining what each part does? Thanks

Muddy_Funster · May 8, 2015

sure

function loadNextStep(step){ //declare custom function that takes your step variable as a parameter
  step = step++; //increment step variable to reflect next step
  $.ajax({ //initialise jquery ajax request
    url:"path/to/yourPHPpage.php?step="+step, //set url that the ajax will load data from, passing in the now incremented step variable to process relevent stage of installation
    type:"get", // set request type to get as we are passing info thrugh the url and are looking to retieave information from the server, not add information to it
    success: function loadContent(data){ // if the ajax call is successfull perform this function taking the returned data in as a parameter called "data"
      $.('#idOfDiv').html(data); // use jquery to change the html contents of your chosen container element (normaly a div element) identified by id = "idOfDiv"
    },
    failure: function displayError(e){ // if the ajax request fails perform this function taking the eror info as a parameter called "e"
      alert(e); //alert the error info
    }
  });
}

Does that help?

_Unique_ · May 8, 2015

sure

function loadNextStep(step){ //declare custom function that takes your step variable as a parameter
  step = step++; //increment step variable to reflect next step
  $.ajax({ //initialise jquery ajax request
    url:"path/to/yourPHPpage.php?step="+step, //set url that the ajax will load data from, passing in the now incremented step variable to process relevent stage of installation
    type:"get", // set request type to get as we are passing info thrugh the url and are looking to retieave information from the server, not add information to it
    success: function loadContent(data){ // if the ajax call is successfull perform this function taking the returned data in as a parameter called "data"
      $.('#idOfDiv').html(data); // use jquery to change the html contents of your chosen container element (normaly a div element) identified by id = "idOfDiv"
    },
    failure: function displayError(e){ // if the ajax request fails perform this function taking the eror info as a parameter called "e"
      alert(e); //alert the error info
    }
  });
}

Does that help?

Yes, alot! Thanks!

Sign In

When submitting a form, the page refreshes which resets all session variables

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information