Need information to stay in fields after page refresh..

pappakaka · February 10, 2011

When someone types in thier information in my Sign Up form i want the information they entered to stay after the page refresh.

For example: I type in my information, but in the email field i forget the '@' symbol and then hit "Sign Up". Then the page would refresh and i would get an error message saying "You must enter a valid email address!" and all the information i typed in before would be gone and i'd have to start over with everything..

My question is, how can i make so that all the information I entered stays after the page refresh? Is there a simple way to do it or do I have to rewrite all my code? (i've provided it below)

I know that you can use jQuery, AJAX and JS to acomplish this and also show the error message without refreshing the page but I don't know much about that and i'm trying to use as little JS as I can. So if there is another easier way?

Here is my PHP script that holds the validation process and shows the errors etc:

<?php

class Register
{
  private $username;
  private $first_name;
  private $last_name;
  private $password;
  private $passmd5;
  private $email;
  private $confemail;
  private $gender;
  private $birth_month;
  private $birth_day;
  private $birth_year;
  private $iagree;

  private $errors;
  private $token;

  public function __construct()
  {
    $this->errors = array();

    $this->username     = $this->filter($_POST['username']);
$this->first_name   = $this->filter($_POST['first_name']);
$this->last_name    = $this->filter($_POST['last_name']);
    $this->password     = $this->filter($_POST['password']);
    $this->email        = $this->filter($_POST['email']);
$this->confemail    = $this->filter($_POST['confemail']);
$this->gender       = $this->filter($_POST['gender']);
$this->birth_month  = $this->filter($_POST['birth_month']);
$this->birth_day    = $this->filter($_POST['birth_day']);
$this->birth_year   = $this->filter($_POST['birth_year']);
$this->iagree       = $this->filter($_POST['iagree']);
    $this->token        = $_POST['token'];

    $this->passmd5      = md5($this->password);
  }

  public function process()
  {
    if($this->valid_token() && $this->valid_data())
         $this->register();

    return count($this->errors)? 0 : 1;
  }

  public function filter($var)
  {
    return preg_replace('/[^a-zA-Z0-9@.]/','',$var);
  }

  public function register()
  {
   mysql_connect("localhost","root","") or die(mysql_error());
   mysql_select_db("membership") or die (mysql_error());

   $sql = "INSERT INTO users(username,password,first_name,last_name,email,gender,birth_month,birth_day,birth_year) VALUES ('{$this->username}','{$this->passmd5}','{$this->first_name}','{$this->last_name}','{$this->email}','{$this->gender}','{$this->birth_month}','{$this->birth_day}','{$this->birth_year}')";
mysql_query($sql) or die(mysql_error());

   if(mysql_affected_rows()< 1)
     $this->errors[] = "Could Not Process Form";
  }

  public function user_exists()
  {
    mysql_connect("localhost","root","") or die(mysql_error());
    mysql_select_db("membership") or die (mysql_error());

    $data = mysql_query("SELECT username FROM users WHERE username = '{$this->username}'");

    return mysql_num_rows($data) > 0 ? 1 : 0;
  }

  public function show_errors()
  {

    foreach($this->errors as $key=>$value)
      echo "<div class=errormessages> 
				$value
		</div>
		<br />";
  }

  public function valid_data()
  {
    if ($this->user_exists()){
      $this->errors[] = 'The username is already taken, choose another one!';
      }
if (empty($this->username)){
      $this->errors[] = 'You must enter a username!';
  }
if (empty($this->first_name)){
      $this->errors[] = 'You must enter your first name';
  }
  
    if (empty($this->password)){
      $this->errors[] = 'You must enter a password!';
  }
elseif (strlen($this->password) < 6){
  $this->errors[] = 'Your password must be longer than 6 characters!';
  }

    if (empty($this->email)){
      $this->errors[] = 'You must enter an email address!';
  }
elseif (!preg_match('/^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,4}$/',$this->email)){
  $this->errors[] = 'You must enter a valid email address!';
  }
elseif ($this->email != $this->confemail){
  $this->errors[] = 'The email addresses you entered did not match!';
  }

if (empty($this->birth_month)){
      $this->errors[] = 'Select which month you were born!';
  }
if (empty($this->birth_day)){
      $this->errors[] = 'Select which day you were born!';
  }
if (empty($this->birth_year)){
      $this->errors[] = 'Select which year you were born!';
  }
if (empty($this->iagree)){
  $this->errors[] = 'You must agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Use</a> to sign up!';
  }

  return count($this->errors)? 0 : 1;
  }


  public function valid_token()
  {
   if(!isset($_SESSION['token']) || $this->token != $_SESSION['token'])
     $this->errors[] = "Invalid Submission";

   return count($this->errors)? 0 : 1;
  }
}

?>

And here the HTML form:

<?php
session_start();

if(isset($_POST['register']))
{
  include_once('classes/class.register.php');

  $register = new Register();

  if($register->process())
    echo "Successfully Signed Up!";
  else
    $register->show_errors();
}

$token = $_SESSION['token'] = md5(uniqid(mt_rand(),true));
?>



<!doctype html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript" src="js/passwordmeter.js"></script>

</head>
<body>

<script src="jquery.js"></script>

<div class="center">

			<!-- PHP -->
	<?php require("html/menu.inc"); ?>
	<?php require("html/layout.inc"); ?>
	<?php require("html/login.inc"); ?>
			<!-- PHP -->

	<div class="register">
	<header>Sign Up Now!</header>
	<form method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
		<ul>
			<li>
				<label for="username">* Username: </label><br />
				<input name="username" autofocus="on" class="rusernamefield" type="text"></input>
			</li>
			<li>
				<label for="first_name">* First Name: </label><br />
				<input name="first_name" class="rfirstnamefield" type="text"></input>
			</li>
			<li>
				<label for="last_name">Last Name: </label><br />
				<input name="last_name" class="rlastnamefield" type="text"></input>
			</li>
			<li>
				<label for="password">* Password: </label><br />
				<input name="password" class="rpasswordfield" onkeyup='password_strength(this.value)'></input>
			</li>

			<div id="password_strength_border">
				<div id="password_strength" class="strength0"></div>
			</div>

			<li>
				<label for="email">* Email Address: </label><br />
				<input name="email" class="remail" type="email" placeholder="email@address.com"></input>
			</li>
			<li>
				<label for="confemail">* Confirm Email Address: </label><br />
				<input name="confemail" class="rconfirmemail" type="email" placeholder="email@address.com"></input>
			</li>
			<li>
				<label for="gender">* Gender: </label><br />
				<select name="gender">
					<option value="Man" selected="selected">Man</option>
					<option value="Woman">Woman</option>
				</select>
			</li>
			<li>
				<label for="birth_month">* Birth Day: </label><br />
				<select name="birth_month">
					<option disabled="disabled" selected="selected">Month</option>
					<option value="01">January</option>
					<option value="02">February</option>
					<option value="03">March</option>
					<option value="04">April</option>
					<option value="05">May</option>
					<option value="06">June</option>
					<option value="07">July</option>
					<option value="08">August</option>
					<option value="09">September</option>
					<option value="10">October</option>
					<option value="11">November</option>
					<option value="12">December</option>
				</select>
				<select name="birth_day">
					<option disabled="disabled" selected="selected">Day</option>
					<option value="01">1</option>
					<option value="02">2</option>
					<option value="03">3</option>
					<option value="04">4</option>
					<option value="05">5</option>
					<option value="06">6</option>
					<option value="07">7</option>
					<option value="08">8</option>
					<option value="09">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
					<option value="16">16</option>
					<option value="17">17</option>
					<option value="18">18</option>
					<option value="19">19</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
					<option value="26">26</option>
					<option value="27">27</option>
					<option value="28">28</option>
					<option value="29">29</option>
					<option value="30">30</option>
					<option value="31">31</option>
				</select>
				<select name="birth_year">
					<option disabled="disabled" selected="selected">Year</option>
					<option value="2011">2011</option>
					<option value="2010">2010</option>
					<option value="2009">2009</option>
					<option value="2008">2008</option>
					<option value="2007">2007</option>
					<option value="2006">2006</option>
					<option value="2005">2005</option>
					<option value="2004">2004</option>
					<option value="2003">2003</option>
					<option value="2002">2002</option>
					<option value="2001">2001</option>
					<option value="2000">2000</option>
					<option value="1999">1999</option>
					<option value="1998">1998</option>
					<option value="1997">1997</option>
					<option value="1996">1996</option>
					<option value="1995">1995</option>
					<option value="1994">1994</option>
					<option value="1993">1993</option>
					<option value="1992">1992</option>
					<option value="1991">1991</option>
					<option value="1990">1990</option>
					<option value="1989">1989</option>
					<option value="1988">1988</option>
					<option value="1987">1987</option>
					<option value="1986">1986</option>
					<option value="1985">1985</option>
					<option value="1984">1984</option>
					<option value="1983">1983</option>
					<option value="1982">1982</option>
					<option value="1981">1981</option>
					<option value="1980">1980</option>
					<option value="1979">1979</option>
					<option value="1978">1978</option>
					<option value="1977">1977</option>
					<option value="1976">1976</option>
					<option value="1975">1975</option>
					<option value="1974">1974</option>
					<option value="1973">1973</option>
					<option value="1972">1972</option>
					<option value="1971">1971</option>
					<option value="1970">1970</option>
					<option value="1969">1969</option>
					<option value="1968">1968</option>
					<option value="1967">1967</option>
					<option value="1966">1966</option>
					<option value="1965">1965</option>
					<option value="1964">1964</option>
					<option value="1963">1963</option>
					<option value="1962">1962</option>
					<option value="1961">1961</option>
					<option value="1960">1960</option>
					<option value="1959">1959</option>
					<option value="1958">1958</option>
					<option value="1957">1957</option>
					<option value="1956">1956</option>
					<option value="1955">1955</option>
					<option value="1954">1954</option>
					<option value="1953">1953</option>
					<option value="1952">1952</option>
					<option value="1951">1951</option>
					<option value="1950">1950</option>
					<option value="1949">1949</option>
					<option value="1948">1948</option>
					<option value="1947">1947</option>
					<option value="1946">1946</option>
					<option value="1945">1945</option>
					<option value="1944">1944</option>
					<option value="1943">1943</option>
					<option value="1942">1942</option>
					<option value="1941">1941</option>
					<option value="1940">1940</option>
					<option value="1939">1939</option>
					<option value="1938">1938</option>
					<option value="1937">1937</option>
					<option value="1936">1936</option>
					<option value="1935">1935</option>
					<option value="1934">1934</option>
					<option value="1933">1933</option>
					<option value="1932">1932</option>
					<option value="1931">1931</option>
					<option value="1930">1930</option>
					<option value="1929">1929</option>
					<option value="1928">1928</option>
					<option value="1927">1927</option>
					<option value="1926">1926</option>
					<option value="1925">1925</option>
					<option value="1924">1924</option>
					<option value="1923">1923</option>
					<option value="1922">1922</option>
					<option value="1921">1921</option>
					<option value="1920">1920</option>
					<option value="1919">1919</option>
					<option value="1918">1918</option>
					<option value="1917">1917</option>
					<option value="1916">1916</option>
					<option value="1915">1915</option>
					<option value="1914">1914</option>
					<option value="1913">1913</option>
					<option value="1912">1912</option>
					<option value="1911">1911</option>
					<option value="1910">1910</option>
					<option value="1909">1909</option>
					<option value="1908">1908</option>
					<option value="1907">1907</option>
					<option value="1906">1906</option>
					<option value="1905">1905</option>
					<option value="1904">1904</option>
					<option value="1903">1903</option>
					<option value="1902">1902</option>
					<option value="1901">1901</option>
					<option value="1900">1900</option>
				</select>
			</li>
			<li>
				<label for="iagree" class="iagreetext">*  I Agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Use</a></label>
				<input name="iagree" type="checkbox" class="iagreebox"></input>
			</li>
			<input name="register" class="registerbutton" type="submit" value="Sign Up"></input>
			<p class="fieldsmarked">Fields marked with an (*) is required</p>
			<input type="hidden" name="token" value="<?php echo $token;?>"/>
		</ul>
	</form>
	</div>

</div>

</body>
</html>

BlueSkyIS · February 10, 2011

using example of one of the fields, username, this is what i do:

<?php

// initialize all form vars to ''.
$username = '';

// Handle post, if any
if ($_SERVER['REQUEST_METHOD'] == "POST") {
     // update the values of all form variables
     $username = isset($_POST['username'])?$_POST['username']:'';

     // form submission code here, etc.
}

// Make values safe to display in HTML, after using stripslashes() IF NECESSARY
$username = htmlspecialchars($username, ENT_QUOTES);

// LATER, in the HTML form, set the value
<input type='text' name='username' value='<?php echo $username; ?>'>

pappakaka · February 10, 2011

What would be the best way to test this code, in the PHP file, HTML file or should i make a new PHP file and link it in to the HTML file?

pappakaka · February 10, 2011

I don't know if this was how you ment but I meda a few tests and i can't get it to work?

I added this function in the end of the PHP file:

  public function test()
  {
   if ($_SERVER['REQUEST_METHOD'] == "POST") {
     $username = isset($_POST['username'])?$_POST['username']:'';
     }

   $username = htmlspecialchars($username, ENT_QUOTES);
   }

and this line in the HTML form:

<input name="username" autofocus="on" class="rusernamefield" type="text" value="<?php echo $username; ?>"></input>

:shrug:

BlueSkyIS · February 10, 2011

if you wrap it in a function, $username is only available within the function. i would not wrap it in a function.

pappakaka · February 11, 2011

You have to excuse me, didn't that the code should be outside of the class..

It worked perfectly though, thanks man!

Sign In

Need information to stay in fields after page refresh..

Recommended Posts

pappakaka

Link to comment

Share on other sites

BlueSkyIS

Link to comment

Share on other sites

pappakaka

Link to comment

Share on other sites

pappakaka

Link to comment

Share on other sites

BlueSkyIS

Link to comment

Share on other sites

pappakaka

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information