Form Fields are not Populated after Pressing Back Button

On a recent project of mine, I had a registration form in a two step registration process. Sometimes a user might want to press the back button to make changes to the information they filled out in step one. Unfortunately, every time I filled in the step one form and submitted it to go to step two, I would press the back button and the form for step one would be empty. It’s always something right? well, I did  a quick bare-bones style test case to see what was causing this and to see if I could recreate the issue and when I entered a basic form with one field, submitted it and went back, the data was there. Confusing to say the least, but in this post, I will solve the issue or die trying.

Below is a good example of old fashioned trial and error PHP and HTML debugging. I did find the problem and I won’t make you read this entire post to get the answer, however I left the test cases for educational purposes. I think it serves as a good example of what us coders have to go through to solve seemingly small issues sometimes.

The Problem

The problem or cause of the form data being gone after the back button was hit was something to do with the PHP session_start function at the top of the script. When I commented it out, the form data worked as expected and was present after pressing the back button. Hopefully this post will save someone some debugging time by getting them right to the root of the problem, session_start. Read on to see how I fixed this.

The Solution

After a few long minutes searching Google, I did find a  way to fix this issue. Simple add the following line of PHP code directly before your session_start function and it all works fine. Here is the code you need to add just before session_start in PHP:

session_cache_limiter(‘public’);

TEST ONE:

first I made two simple scripts, a HTML form and a processing script with the following contents:

HTML in formtest.html

<form method=”post” action=”process.php”>
<input type=”text” id=”name” name=”name” />
<input type=”submit” />
</form>

PHP in process.php

<?php
//form back button population error debug testing script:

//get data from formtest.html
$n = $_POST[‘name’];
echo “<h3>Name entered into form was $n now hit backbutton to see if it is still populated in the name field of the form on prev. page.</h3>”;
?>

This worked as expected, so I had to throw in more variables to attempt to find out what causes the form to not populate when going back via the browser back button. So, next I tried changing just the HTML page to this:

TEST TWO

<!DOCTYPE html>
<html>
<head>
<body>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type” /
<form id=”regform” name=”regform” method=”post” action=”process.php”>
<input type=”text” id=”name” name=”name” />
<input type=”submit” />
</form>
</html>
</head>
</body>

So I added the HTML5 DOCTYPE declaration and basic HTML page tags as well as an id and name to my form to see if by chance any of these might be causing the issue however unlikely it seemed. But it still worked when I tried it, meaning the form field was still populated when I pressed the back button after submitting it. So where is the problem? Next I added more to the form as follows:

TEST THREE

<!DOCTYPE html>
<html>
<head>
<body>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type” />
<form id=”regform” name=”regform” method=”post” action=”process.php”>
<input type=”text” id=”name” name=”name” />
<input type=”submit” />
</form>
</html>
</head>
</body>

It still worked, so it wasn’t the DOCTYPE, content type form id, name or basic HTML tags causing the issue. Next I tried making some additions to process.php, but I wont’ post them because the problem wasn’t there at all. After that, I changed formtest.html, the basic form testing HTML script to a PHP script since the form that was causing issues was a PHP script. I also added a dynamically included header so my new formtest.php script looks like this:

TEST FOUR

<?php
include ‘header_partner.php’;
?>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type” />
<form id=”regform” name=”regform” method=”post” action=”process.php”>
<input type=”text” id=”name” name=”name” />
<input type=”submit” />
</form>
</html>
</head>
</body>

Finally, I recreated the problem, but the only question that remains is was the problem due to using a PHP script to submit the form from or was it something in the included header.php file that I included at the top of the script, so time to narrow down the possible causes. I took out the php include and closing HTML tags at the end of the page, so now my formtest.php script looked like this:

TEST FIVE

<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type” />
<form id=”regform” name=”regform” method=”post” action=”process.php”>
<input type=”text” id=”name” name=”name” />
<input type=”submit” />
</form>
basically it was the same as test one above, but using a PHP file instead of an HTML file, so if the form data isn’t present on going back this time, I know the problem lies with PHP. However, the problem was gone and the form data was there, so the problem isn’t PHP itself, but it did let me know that the problem now lies in my include file or just having PHP tags themselves before the form, so first I added just PHP tags before my form so that formtest.php looked like:

TEST SIX

 

<?php
//this is s PHP comment….
?>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type” />
<form id=”regform” name=”regform” method=”post” action=”process.php”>
<input type=”text” id=”name” name=”name” />
<input type=”submit” />
</form>
Well, that still didn’t cause the issue again and the data was there on returning to the page after pressing the back button, so the problem has to be in header.php right? Here is header.php contents:

TEST SEVEN

<?php
//start session vars and get user email for every page header file is included in:
session_start();
//get email from session var set in login.php script:
if(isset($_SESSION[‘user_email’])){
$eml = $_SESSION[‘user_email’];
//get member’s ID
include ‘c.php’;
$idq = mysql_query(“SELECT * FROM members WHERE email=’$eml'”)or die(mysql_error());
    while($idr = mysql_fetch_array($idq)) {
    $mid = $idq[‘id’];
    }//end while
}
?>
<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type” />
<link rel=”icon” type=”image/png” href=”images/lock.png” />
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<?php
//go to db to get 800 no. and head text from settings table:
include ‘c.php’;
$phquery = mysql_query(“select * from settings where id=’1′”) or die(mysql_error());
while($r=mysql_fetch_array($phquery)){
$ph800 = $r[‘phone800’];
$headText = $r[‘header_text’];
}//end while.
?>
<title>
Caregivers | QR Code Emergency Medical Cards
</title>

<script src=”http://code.jquery.com/jquery-1.4.4.min.js” type=”text/javascript”></script>
</head>
<body>

<div id=”main-wrapper”><a name=”top”></a>
    <div id=”header-wrapper”>

        <div id=”header”>    
        
            <div>
            
                <span id=”siteseal” style=”position:absolute;top:3px;left:195px;”><script type=”text/javascript” src=”https://seal.starfieldtech.com/getSeal?sealID=vrLtyGqVemlr56J0BgCP0KqRHNTY0QUzZXEZkZk3fkHQz181UVL”></script></span>
            
            <div id=”one800b”><?php echo $ph800; ?></div>
            <span id=”logout” onclick=”window.location=’logout.php'”>
                <?php
                if(isset($eml)){
                    if($eml != “”){echo “Log out”;}
                }//end if eml var set.
                ?>
            </span>
            
                <div id=”login-wrapper” onclick=”window.location=’login.php'”>
                    <div id=”login”>member login</div>
                </div>
                
                <div id=”top-login-form”>
<p><a href=”register.php”>Sign Up</a></p>
                </div>                
                
                <img id=”mainlogo” src=”images/lifestat911new.png” onclick=”window.location=’index.php’;” />

                
<?php
include ‘top_nav_partner.php’;
?>

<div id=”headtxt”>
<?php echo $headText; ?>
</div>

<?php //include ‘user_status.php’; ?>

<div id=”headbgimg”>
<img src=”images/heart2.gif” style=”opacity:0.3;width:400px;height:99px;” />
</div>
            </div>    
        </div><!–######################## End header div #####################–>

So I pasted the above code to the top of formtest.php and tested to see if the form data would disappear after pressing the back button again and it sure enough the data was gone, so that tells us a couple other things, it wasn’t due to the include statement and it is somewhere in the contents of the include file, but not the include process itself. so I starting taking away from the header code a few lines at a time to find which section of code was causing the issue. First I took out the opening PHP tag and everything down to the form so I took out this:

TEST EIGHT

<?php
//start session vars and get user email for every page header file is included in:
session_start();
//get email from session var set in login.php script:
if(isset($_SESSION[‘user_email’])){
$eml = $_SESSION[‘user_email’];
//get member’s ID
include ‘c.php’;
$idq = mysql_query(“SELECT * FROM members WHERE email=’$eml'”)or die(mysql_error());
    while($idr = mysql_fetch_array($idq)) {
    $mid = $idq[‘id’];
    }//end while
}
?>

Then I tested it and it worked! So pressing the back button didn’t cause the form to be blank this time, therefore we now know the problem is in the above code. Time to dissect it further… Next, I replace the above code without the if statement. I removed the following:

TEST NINE

if(isset($_SESSION[‘user_email’])){
$eml = $_SESSION[‘user_email’];
//get member’s ID
include ‘c.php’;
$idq = mysql_query(“SELECT * FROM members WHERE email=’$eml'”)or die(mysql_error());
    while($idr = mysql_fetch_array($idq)) {
    $mid = $idq[‘id’];
    }//end while
}

Then tested again and after pressing the back button, the data was missing again, so the problem wasn’t there apparently, which leaves only one thing it seems, the session start PHP functioin. so I took it out and it worked! Low and behold, the session_start PHP function was the culprit the whole time. Just to make certain, I commented out the session_start function in the site I originally had the trouble with and sure enough, it solved the problem. Unfortunately, it presents a whole new problem, how do I now start my session?

So as you can see, I did solve the problem at the top of the article by using:

session_cache_limiter(‘public’);

session_start();

instead of just session start. Had I known this from the start, I would of titled the article:

PHP’s session_start Function Causes Forms to Lose Data When Pressing Browser Back Button

Maybe a shorter article will follow with that title;-)

 

 

 

 

How to Add Spell Checker to Notepad++

I have been using Notepad++ as my coding text editor of choice for several years now. One of the main things I use it for is to create web pages in PHP and/or HTML. Over those years, I can’t count the number of times I have been chastised for my somewhat poor spelling and numerous typos the end up in the final product or website that I turn over to my clients. Well, it’s time I did something about it, don’t you think? Well, my clients think it is and several have mentioned it, so here I am years after starting to use Notepad++, finally installing a spell checking plugin. Here we go!

Also, I recently added a bug fix to this tutorial that describes how to fix it so that you can use the learn button and otherwise save changes to the dictionary files. When I installed Aspell, none of this worked and it was aggravating, so I learned how to fix it and will share at the bottom of this article, so if you are here to learn how to fix the bugs in Aspell, skip down to the bottom of this post. If you get an error something like the following one, then the bottom section is for you:

Ensure that the security settings of the “C:/Program Files (x86)/Aspell” folder for the current user allow for modifying and writing

Aspell
Usage example with replace by text same as misspelled text

Steps to installing Spell Check for Notepad++

Before you start, you should close any open applications, or at least close Notepad++ so it can get the updates needed if any while you install the plugin.

  1. Go to http://aspell.net/win32/ and download the “Full Installer” to your desktop or downloads folder and double click on it when it’s downloaded fully to set it up on your machine. I selected the defaults mostly, but did check the boxes to allow a desktop icon and a right click menu option so I could take advantage of the drag and drop document feature and quick spell check options.
  2. During the installation process, after clicking through the terms of service and a couple other routine clicks, you will come to the “information” dialog. It will say: “Please download and install at least one dictionary from http://aspell.net/win32/dicts” So, naturally, I clicked on the link and came to find that it was a dead link and that the spell check plugin hasn’t been kept up for the past ten plus years. So, determined, I went to back to the same webpage above, , where I downloaded Aspell from, and found the dictionary list I was seeking. Lucky me! Then I scrolled down and found the one for English entitled “aspell-en-0.50-2-3.exe” (Click to download) and clicked on it to download the English dictionary I needed. You can click on the link I just provided to download it without having to go back to the webpage however. If you need other languages, then go to the webpage you downloaded Aspell from to get them.
  3. After your Aspell installation is finished, double click on the dictionary file you downloaded in the last step to install it as well. Install it with all defaults as long as you did the same with the install directories for Aspell as well. Click, click, click and it’s installed!

Notes: When you are done with the three simple installation steps, open Notepad++, click on plugins in the top menu and select “spell checker” from the drop-down menu. I was impressed with the easy installation even though it was missing a link and there wasn’t much documentation. It took less than five minutes to do, so this is an easy thing to do that will save you tons of headaches in the future.

I do have one complaint with the functionality and did find one apparent bug right off the bat. The issue that stuck out to me the most was that it didn’t automatically suggest the most likely correct spelling of the misspelled words. It did provide a list of most likely alternatives, but there is a field that is supposed to have the most likely correct spelling and that field is always populated with the misspelled word instead of the correct spelling. Then I noticed there was a button that read “learn”, so I figured it had to be taught this and there is where I found the apparent bug. When I pressed the Learn button, it gave me an error and didn’t do anything constructive. This is new to me, so perhaps I will report back later on this blog when I find a solution to the bug and/or functionality issue. Even with this minor bug and issue, it still performs well and gets the job done, so overall, I am happy to have a spell checker for Notepad++ now!

As promised, I am back to solve the issues with Aspell mentioned in this tutorial. Here is how to fix the error:

Ensure that the security settings of the “C:/Program Files (x86)/Aspell” folder for the current user allow for modifying and writing

Locate your Aspell directory by the error itself. Mine was in “C:/Program Files (x86)/Aspell” as the error indicates. From the Aspell directory do the following fixes:

  1. Right Click on the Aspell directory and select “Properties”. Then select the “Security” tab and click on the “Edit” button to alter permissions.
  2. Click on the username that you use Notepad++ with then click the Allow column for “Full Control” for that user in the permissions box. Hit apply then okay twice.
  3. Now enter the Aspell/dictionary directory and give any files with .pws or extension in the dictionary folder write permissions for your username. Using the same technique as in the first couple steps above.
  4. Next open up Notepad++ or notepad and create a new text file then copy and paste the following into it and save it as en.pws: personal_ws-1.1 en 2
    µÄ
  5. Click the encoding option in the top toolbar of notepad and make sure that ANSI is the coding type and save the document to c:/Program Files(x86)/Aspell or wherever your Aspell was installed.
  6. Now go back to notepad or Notepad++ and create yet another text file and paste the following green text into the first line and save it as an ANSI encoded file into the same Aspell directory, but name this file en.prepl: personal_repl-1.1 en 0 
  7. close and restart Notepad++ and try out the program with the Aspell plugin again and you will find it should be all working now!

 

 

How to Stop Google from Following a Link

To keep Google and possibly other search engines from indexing a link in your website, use the rel HTML attribute with the anchor link tag like in the following line of HTML code:

<a href=”http://www.jafty.com” rel=”nofollow”>Jafty Interactive Web Development</a>

The above works, but you also have to make sure the link is not in your site map or  linked to without the nofollow rel value elsewhere or it probably will show up to search engines anyway. If you only mention the link once and use the rel attribute with nofollow, it will work however.

How to add an favicon image to browswer tab

Adding a Favicon Image to a Website

image of favicon
Example of favicon in browser tab

How to add an favicon image to browser tab

Have you even wondered how a lot of websites include a small icon image in the browser tab, juse before the site title shows up

well, it is very simple really Simply include the following line of code into your sites HTML somewhere within the head tag, before the opening body tag:

<link rel=”icon” type=”image/png” href=”images/lock.png” />

yes, that is really all there is to it! Obviously, you need to prelace the image type and href attributes to accomodate your icon image which should be either 32 px wide by 32 high or 16 x 16.

Tips:
You can easily resize any imaege to be used as a favicon for your site in Gimp which can be downloaded online from