Make form remember input upon error notification

meek

Hi there.

I have a simple comment script. If people forget to type their name or something else in the required fields they get an error message stating that they must remember to provide the information necessary. However, when displaying the error message the form clears completely which is a bad thing - especially because people may have typed a long comment and then suddenly it's all gone. How can I make my form remember the input - even after error notifications - until you hit 'Send'?

My script has two parts. The script itself and the input form:
commentFunctions.inc.php:

<?PHP
/* TABLE DUMP:

   DROP TABLE IF EXISTS `comments`;
   CREATE TABLE `comments` (
  `commentID` int(11) NOT NULL auto_increment,
  `comment` text,
  `URL` text,
  `email` varchar(100) default NULL,
  `name` varchar(40) default NULL,
  `postNo` varchar(100) NOT NULL default '',
  `theDate` datetime default NULL,
  PRIMARY KEY  (`commentID`)
) TYPE=MyISAM;

*/

//Config
    // Mail is sent upon new comment
    $GLOBALS['email'] = "your@e-mail.com"; 
   // Window title
    $GLOBALS['title'] = "Comments:";             

    // Full path to the comment script folder
    $GLOBALS['root'] = "http://www.website.com/comments/";
   //Db address (or leave empty.)
    $GLOBALS['database_adress'] = "";
   //Db name:
    $GLOBALS['database_navn'] = "******";
   //Username:
    $GLOBALS['database_bruger'] = "******";
   //Password:
    $GLOBALS['database_password'] = "******";

  // Functions
  function writeCommentHeader()  {
  echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
  echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"DTD/xhtml1-transitional.dtd\">\n";
  echo "<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"da\">\n";
  echo "<head>\n";
  echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />";
  echo "<link href=\"/comments/comments.css\" rel=\"stylesheet\" type=\"text/css\" />\n";
  echo "<title>Add or read comments</title>\n";
  echo "<base target=\"_blank\" />\n";
  echo "</head>\n";
  echo "<body>\n\n";    

}

function sendCommentMail($from, $body) {
    $subject = "Ne comment from " . $from;
    mail($GLOBALS['email'], $subject, $body, "From: no-reply@e-mail.com\r\n");
}

  function insertComment($postNo) {
    if (isset($_POST['theComment']) && isset($_POST['theName']) && isset($postNo)) {
      if ($_POST['theComment'] != "" && $_POST['theName'] != "" && is_numeric($postNo)) {

    $aComment = htmlspecialchars(mysql_escape_string($_POST['theComment']));
    $aName = htmlspecialchars(mysql_escape_string($_POST['theName']));   
    $aURL = htmlspecialchars(mysql_escape_string($_POST['theURL']));
    $anEmail = htmlspecialchars(mysql_escape_string($_POST['theEmail']));               

            sendCommentMail($_POST['theName'], $_POST['theComment']);
    $query = ("INSERT INTO comments (comment, URL, email, name, postNo, theDate) VALUES ('$aComment', '$aURL', '$anEmail', '$aName', '" . $postNo . "', NOW())");
    //executeSQL closes conn. to db.
    executeSQL($query);
  }
} 
  }
      //Make links clickable:
    function url2link($url,$chr_limit = 70,$add = '...') {
    return preg_replace("!(http:/{2}[\w\.]{2,}[/\w\-\.\?\&\=\#]*)!e", "'<a href=\"\\1\" class=\"orange\" title=\"\\1\" target=\"_blank\">'.(strlen('\\1')>=$chr_limit ? substr('\\1',0,$chr_limit).'$add':'\\1').'</a>'", $url);
}

   function getComments($postNo)  {
    setlocale(LC_ALL, 'da_DK.ISO_8859-1');
    $comments = executeSQL("SELECT name, email, comment, URL, UNIX_TIMESTAMP(theDate) as thisDate FROM comments WHERE postNo = '" . $postNo . "' ORDER BY theDate");
    //hvis der ikke er nogen kommentarer kører løkken ikke
    while ($data = mysql_fetch_array($comments))  {
        $localTime = (int)strftime("%e", $data['thisDate']) . strftime(". %b. %Y", $data['thisDate']) . " kl. " . strftime("%H:%M:%S", $data['thisDate']);
        $comment = stripslashes($data['comment']);
        $comment = nl2br($comment);
        $comment = wordwrap($comment, 65, "\n", 1);
      echo "<div class=\"box\">\n";
      echo "<p class=\"date\">" . $localTime . "</p>\n";
      echo "<p>" . $comment = url2link($comment) . "</p>";
      echo "<span class=\"small\">Skrevet af</span><span class=\"titel\"><b>" . stripslashes($data['name']) . "</b></span>\n";
      if ($data['email'] != "") {
        echo "  &nbsp;| <a class=\"plain\" title='Email' href=\"mailto:" . $data['email'] . "\">&nbsp;@&nbsp;</a>\n";
      }
      if ($data['URL'] != "") {
        echo " | <a class=\"plain\" title='Website' href=\"" . $data['URL'] . "\">&nbsp;www&nbsp;</a>\n";
      }
      echo "</div><br />\n\n";
    }
  }

  function getNumOfComments($itemNo) {

  $numOfComments = executeSQL("SELECT COUNT(postNo) AS numOfCom FROM comments WHERE postNo = '$itemNo'");
  //One or more comments
  $tag = "Comments";
  $data = mysql_fetch_array($numOfComments);
    if ($data['numOfCom'] == 1) {
      $tag = "Comment";
    }
  echo "<a href=\"#\" onclick=\"kommentar=window.open('" . $GLOBALS['root'] . "comments.php?postNo=" . $itemNo . "','commentWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=470,height=510'); return false;\" title=\"Tilføj eller læs kommentarer\"  class=\"orange\">" . $tag . " (" . $data['numOfCom'] . ")</a>";
  }    

  function executeSQL($strSQL, $close="true")  { 
    //Open conn.
    $link = mysql_connect($GLOBALS['database_adress'], $GLOBALS['database_bruger'], $GLOBALS['database_password']);
    if (!$link) {
      //If no conn. the function ends
      echo "<p>" . mysql_error() . "</p>"; 
    }
    //Choose database
    else  { 
      if(!mysql_select_db($GLOBALS['database_navn'], $link)) {
        echo "<p>" . mysql_error() . "</p>"; 
      }
      //Make query
      else  { 
        $result = mysql_query($strSQL);

    if (!$result) {
      //Show error if any
      echo "<p>" . mysql_error() . "</p>";
    }
  }
      if ($close == "true") {
      if (!mysql_close()) {
        echo "<p>" . mysql_error() . "</p>";
      }
    }
  return $result;
}
  }//End executeSQL
?>

comments.php:

<?PHP

  if (isset($_GET['postNo']))  {
    $postNo = $_GET['postNo'];
  } else {
    $postNo = $_POST['postNo'];
  }
  include("commentFunctions.inc.php");

  //writes a header
  writeCommentHeader();
?>

<body onload="if(document.formname)document.formname.theName.focus()">
  <h2>
    <?PHP echo $GLOBALS['title']; ?>
  </h2>

<?PHP
  //Error messages:
  if (isset($_POST['send']))  {
      if ($_POST['theComment'] == "" || $_POST['theName'] == "") {
        echo "<div class\"box\"><p class=\"error\">Please enter at least your name and a comment - otherwise what's the point pushing the button...</p></div>";
      } else  {
    insertComment($postNo);
    }
  }

  //Show comments with postNo
  getComments($postNo);
?>
<br>
<br>
  <form name="formname" action="<?PHP echo $_SERVER['PHP_SELF']; ?>" method="post" target="_top" style="display:inline; margin:0px;">
    <b>
      <span class="titel">Name:</span><span class="star">*</span><br />
      <input name="theName" type="text" style="border:1px solid #999;" size="30" />
      <br />
      <span class="titel">E-mail:</span><br />
      <input name="theEmail" type="text" style="border:1px solid #999;" size="30" />
      <br />
      <span class="titel">Website:</span> <br />
      <input name="theURL" type="text" style="border:1px solid #999;" size="30" />&nbsp;&nbsp;* <span style="font-size:9px;">= Skal udfyldes.</span>      

    <br />
    <span class="titel">Comment:</span></b><span class="star">*</span><br />
      <textarea name="theComment" style="border:1px solid #999;word-wrap:break-word;" rows="10" cols="65"></textarea>
      <br />
      <input type="hidden" name="postNo" value="<?PHP echo $postNo ?>" />
      <input type="submit" style="font-size: 12px; width:110px; border: 1px solid #000000; background-color: #e9e9e9;cursor:pointer;" name="send" value="Add comment" />
      &nbsp;
      <input type="reset" style="font-size: 12px; width:50px; border: 1px solid #000000; background-color: #e9e9e9;cursor:pointer;" value=" Clear " />
  </form><br />
  <br>
    <br>
    <table width="300" border="0" cellpadding="0" align="center">
      <tr>
        <td style="text-align:center;"><input name="button" type="button" onClick="window.close()" value="Close window" class="submit_knap"></td>
      </tr>
    </table>
</body>
</html>

Any solutions to this problem?

Thanks in advance.

bbreslauer

I haven't looked over all your code, but you can set the value attribute in the input tags to look for a PHP variable $_POST['inputnameattribute'], where inputnameattribute is the name of the input tag. Use POST or GET, depending on how you submit the form.

When a user comes to the form the first time, the variable will be blank, so nothing will show in the input tag, but when they submit it and need to fix something, the variable will be filled, so the tag will contain what they submitted. You might want to take out any quotes that are in the string, or else that might screw up your tags

(i.e. <input value='I don't want to do this' />)

meek

Okay, thanks. I'm new to php so I'm not always sure what I'm doing. I tried adding these POST lines to the form script:

<?PHP
  if (isset($_GET['postNo']))  {
    $postNo = $_GET['postNo'];
  } else {
    $postNo = $_POST['postNo'];
  }

 //New POST lines begin

  if (isset($_POST['theName']))
  	$theName = $_POST['theName'];

  if (isset($_POST['theComment']))
  	$theComment = $_POST['theComment'];

//New POST lines begin

  include("commentFunctions.inc.php");

  //writes a header
  writeCommentHeader();
//... - rest of the code here.
?>

However, it doesn't seem to work. Am I doing it right or can you give me an example?

bbreslauer

You need to change the <input> tags in comments.php like follows:

changes to

Do that with all the <input> tags that you need this to work for.

meek

Yay, it works! Thanks a lot, mate! :evilgrin:

Drakla

If you want to make an easily extendable job of it do something like this that allows you to add more fields to an array.

$signupFields = array('title','name','surname','address','address2','town','county','postcode','tel','mobile',
		'password','email','gender','dobday','dobmonth','dobyear');

function get_submitted_user_data(&$allFields)
{
		// fields that are onscreen - if fields are empty then create them

foreach ($allFields as $field)
{
	if (!isset($_POST[$field]))
		$data[$field] = '';		// put in a blank if it's first time
	else
	{
		if (get_magic_quotes_gpc());
			$_POST[$field] = stripslashes($_POST[$field]);

		$data[$field] = htmlspecialchars(trim($_POST[$field]));
	}
}

return $data;
}

Part two - the form, just imagine how horrid to maintain this is - and it's not exactly a huge form.

$userData = get_submitted_user_data($signupFields);

<form name="form1" id="form1" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" class="userDetails">
        <tr>
          <td><div align="right"><img src="images/email-gr.gif" width="72" height="15" /></div></td>
          <td><span class="generalMessage">
            <input name="email" type="text" class="graphTField" value="<?php echo $userData['email']; ?>" size="30" />
          </span></td>
        </tr>
        <tr>
          <td><div align="right"><img src="images/password-gr.gif" width="128" height="16" /></div></td>
          <td><span class="generalMessage">
            <input name="password" type="text" class="graphTField" value="<?php echo $userData['password']; ?>" maxlength="20" />
          </span></td>
        </tr>
        <tr>
          <td><div align="right"></div></td>
          <td>&nbsp;</td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/title-gr.gif" width="52" height="15" /></div></td>
          <td align="left"><select name="title" class="graphSelect" id="select2" style="font-size: 9pt;">
              <option value=''>select</option>
              <?php title_options(); ?>
            </select>
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/name-gr.gif" width="71" height="16" /></div></td>
          <td><input name="name" type="text" class="graphTField" id="name" value="<?php echo $userData['name']; ?>" size="20" />
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/surname-gr.gif" width="114" height="16" /></div></td>
          <td><input name="surname" type="text" class="graphTField" id="surname3" value="<?php echo $userData['surname']; ?>" size="20" />
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/gender-gr.gif" width="88" height="16" /></div></td>
          <td><div align="center">
              <label for="genmale">
              <input id="genmale" type="radio" name="gender" value="m"<?=$userData['gender']=='m'? ' checked': ''?> />
              <img src="images/male-gr.gif" width="65" height="15" /></label>
              <label for="genfemale">
              <input id="genfemale" type="radio" name="gender" value="f"<?=$userData['gender']=='f'? ' checked': ''?> />
              <img src="images/female-gr.gif" width="97" height="16" /></label>
              <?= REQUIRED_FIELD ?>
              <br />
          </div></td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"></div></td>
          <td>&nbsp;</td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/address-gr.gif" width="101" height="16" /></div></td>
          <td><input name="address" type="text" class="graphTField" id="address" value="<?php echo $userData['address']; ?>" size="20" />
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/address-gr.gif" width="101" height="16" /><img src="images/2.gif" width="16" height="16" /></div></td>
          <td><input name="address2" type="text" class="graphTField" id="address2" value="<?php echo $userData['address2']; ?>" size="20" />
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/town-gr.gif" width="68" height="15" /></div></td>
          <td><input name="town" type="text" class="graphTField" id="town" value="<?php echo $userData['town']; ?>" size="20" />
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/county-gr.gif" width="87" height="15" /></div></td>
          <td><input name="county" type="text" class="graphTField" id="county" value="<?php echo $userData['county']; ?>" size="20" />
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/postcode-gr.gif" width="113" height="15" /></div></td>
          <td><input name="postcode" type="text" class="graphTField" id="postcode" value="<?php echo $userData['postcode']; ?>" size="15" />
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/tel-gr.gif" width="37" height="15" /></div></td>
          <td><input name="tel" type="text" class="graphTField" id="tel" value="<?php echo $userData['tel']; ?>" size="20" />
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/mobile-gr.gif" width="85" height="15" /></div></td>
          <td><input name="mobile" type="text" class="graphTField" id="mobile" value="<?php echo $userData['mobile']; ?>" size="20" />
          </td>
        </tr>
        <tr class="compWinTable">
          <td><div align="right"><img src="images/birthday-gr.gif" width="98" height="16" /></div></td>
          <td align="left"><select name="dobday" style="font-size: 9pt;">
              <option value="0">Day</option>
              <?php
						  	for ($i=1; $i<=31; $i++)
								echo '<option value="',$i,'"', $userData['dobday']==$i? ' selected':'' ,'>',$i,'</option>';
						?>
            </select>
              <select name="dobmonth" style="font-size: 9pt;">
                <option value="0">Month</option>
                <?php
							for ($i = 1; $i <= 12; $i++)
								echo '<option value="',$i,'"', $userData['dobmonth']==$i? ' selected':'' ,'>',$months[$i],'</option>';
							?>
              </select>
              <select name="dobyear" style="font-size: 9pt;">
                <option value="0" selected="selected">Year</option>
                <?php
								// the start year will be now - 18 years to make sure they're of the right age
							$startYear = date('Y') - 18;
							for ($i = $startYear; $i >= 1900; $i--)
								echo '<option value="',$i,'"', $userData['dobyear']==$i? ' selected':'' ,' />',$i,'</option>';
							?>
              </select>
              <?= REQUIRED_FIELD ?>
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><div align="center">
              <input name="signup" type="image" id="signup" src="images/go-button.gif" width="44" height="26" border="0" />
          </div></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </form>

meek

I thank you all! 🙂