Format data and display in formatted manner

Hi Experts:

I have a html/php form where the user can enter data.  This form contains a Description field which is a textarea.  The data entered in the form is stored in MySQL database and displayed in the table on a different page.  The issue here is if the data entered in Description field contains line breaks then it does not display as separate line.  The entire data in the Description field displays as plain text.  Is there a way to allow formatting in the Description field on the form and then display the formatted text in the same way in the table.  

Atleast if the line breaks entered in the description field must be displayed.

Here is the code for the form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type='text/javascript'><!--
function initFlyouts(){initPublishedFlyoutMenus([{"id":"122664640769900158","title":"Library Catalog","url":"index.html"},{"id":"532658225518218983","title":"About the Library","url":"http:\/\/icscborrowinglibrary.com\/aboutlibrary.html"},{"id":"813612181614597800","title":"Ask a Librarian","url":"ask-a-librarian.html"},{"id":"939506420111845331","title":"Support your Library","url":"support-your-library.html"}],'845325556776834118',"<li class='wsite-nav-more'><a href='#'>more...<\/a><\/li>",'',false)}
if (Prototype.Browser.IE) window.onload=initFlyouts; else document.observe('dom:loaded', initFlyouts);
//-->
</script>
</head>
<body class='wsite-theme-light wsite-page-add-books weeblypage-add-books'>
<div id="wrapper">
        <div id="container">
            <div id="header" class="wsite-header"></div>

            
            
            
            <div id="contenttop">
                <div id="contentbtm">
                    <div id="content">
                <div id='wsite-content' class='wsite-not-footer'>
<div class='wsite-not-footer'>
<div ><div id="698106845765048406" align="left" style="width: 100%; overflow-y: hidden;" class="wcustomhtml"><form enctype="multipart/form-data" action="add.php" method="POST">
<h3><font color='black'>Add Properties:</font></h3>
<br />
<table> 
<tr><td><font color='black'>Name:</font></td><td> <input type="text" name="name" size="40"></td></tr> 
<tr><td><font color='black'>Location:</font></td><td> <input type="text" name="location" size="40"></td></tr> 
<tr><td><font color='black'>Description:</font></td><td><textarea cols="31" rows="6" name="description"></textarea></td></tr> 
<tr><td><font color='black'>Area:</font></td><td> <input type="text" name="area" size="40"></td></tr>
<tr><td><font color='black'>Call #:</font></td><td> <input type="text" name="callnum" size="40"></td></tr> 
<tr><td><font color='black'>Property Type:</font></td><td> 
   <select name="type">
     <option value="Single Family Home">Single Family Home</option>
     <option value="Commercial">Commercial</option>    
     <option value="Condo">Condo</option>
     <option value="Apartment">Apartment</option>
   </select>
 </td></tr> 
<tr><td><font color='black'>Photo:</font></td><td> <input type="file" name="photo" size="40"></td></tr> 
<tr><td></td><td><input type="submit" value="Add"></td></tr></font>
</table></form><hr>
</div>



</div>

</div>
</div>

                    <div class="clear"></div>
                    </div>
                </div>        
            </div>
                <div id="footer" align='center'>
<a name="fb_share">Share us on Facebook</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>&nbsp;&nbsp;
                    <A HREF="faqs.html"><u>FAQs</u></A>&nbsp;&nbsp;&nbsp;&nbsp;<A HREF="recommend.html"><u>Recommend a purchase</u></A>&nbsp;&nbsp;
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                </div>
        <div class="clear"></div>        
        </div>            
    </div> 

</body>
</html>

<?php

// Connects to your Database 
$dbh=mysql_connect("jackrealestatecom.jillmysql.com", "jack", "Cher!f2015") or die(mysql_error()) ; 
mysql_select_db("properties") or die(mysql_error()) ; 
$maxsize = 10000000;


if($_POST) {
  //This is the directory where images will be saved 
  $target = "images/";
  $target = $target . basename( $_FILES['photo']['name']); 

  $photosize = $_FILES['photo']['size']; 
  if($photosize > $maxsize){
    echo "Sorry, file size exceeds the limit.<br><br>"; 
    exit();
   }

 
  //This gets all the other information from the form 
  $name=$_POST['name']; 
  $location=$_POST['location'];
  $callnum=$_POST['callnum'];
  $type=$_POST['type'];  
  $description=$_POST['description']; 
  $area=$_POST['area']; 
  $pic=$_FILES['photo']['name']; 
 
  //Writes the information to the database 
  mysql_query("INSERT INTO listings (id,name,location,description,callnum,type,area,image)  VALUES ('$id', '$name', '$location', '$description', '$callnum', '$type', '$area', '$pic')") ; 
 
  //Writes the photo to the server 
  if(move_uploaded_file($_FILES['photo']['tmp_name'], $target)) { 
    //Tells you if its all ok 
    echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded, and your information has been added to the directory<br><br>"; 
  } else { 
    //Gives and error if its not 
    echo "Sorry, there was a problem uploading your file.<br><br>"; 
  } 
}

////Retrieves data from MySQL 
//$data = mysql_query("SELECT * FROM listings") or die(mysql_error());  //Puts it into an array 
//while($info = mysql_fetch_array( $data )) { 
 // //Outputs the image and other data
 // echo "<img src=images/". $info['image'] ."> <br>"; 
  //echo "<b>Name:</b> ". $info['name'] ."<br>"; 
  //echo "<b>location:</b> ". $info['location'] ."<br>"; 
  //echo "<b>Description:</b> ". $info['description']. " <br>";
  //echo "<b>area:</b> ". $info['area']. " <br><br>";
//}

// close the database connection
mysql_close($dbh)

?> 

Open in new window


Here is the code for displaying the data in table:
<?php
// list.php

$field = $_GET["f"];
$q = $_GET["q"];
$where = "";
if (!empty($q)) {
    $where = " WHERE `".addslashes($field)."` LIKE '%" . addslashes($q) . "%'";
}

// Connects to your Database 
$dbh=mysql_connect("jackrealestatecom.jillmysql.com", "jack", "Cher!f2015") or die(mysql_error()) ; 
mysql_select_db("properties") or die(mysql_error()) ; 
//count number of records
$query = "SELECT * FROM listings".$where;
//echo $query;
$result = mysql_query($query) or die(mysql_error());
$num_rows = mysql_num_rows($result);

if(mysql_num_rows($result) == 0) {
  echo "No results were found.";
}

//number you want to display per page
$page_rows=10;

//This tells us the page number of last page
$last=ceil($num_rows/$page_rows);

//determine results
//This checks to see if there's a page number.  If not, it will set it to page 1.
if(isset($_GET['pagenum'])) {
  $pagenum=$_GET['pagenum'];
}
else{
  $pagenum=1;
}

$pagenum=(int)$pagenum;
if ($pagenum>$last)
{
$pagenum=$last;
}

if ($pagenum<1)
{
$pagenum=1;
}

$offset=($pagenum - 1) * $page_rows;

$i=1;

//Retrieves data from MySQL 
$result = mysql_query("SELECT * FROM listings $where ORDER BY id LIMIT $offset, $page_rows") or die(mysql_error());  //Puts it into an array 
while($row = mysql_fetch_array($result))
  {
  //Outputs the image and other data
$id=$row['id'];
$image=$row['image'];
$name=$row['name'];
$location=$row['location'];
$description=$row['description'];
$area=$row['area'];
$type=$row['type'];


echo "<table border='1' BORDERCOLOR='#7E2217' cellpadding='10' width='100%' style='table-layout:fixed'><col width='38' /><col width='200' />" ; 
echo "<tr align=left><th colspan='2'><font color='black'> <b>". $name ."</b><br>". $location. "</font></th></tr>"; 
echo "<tr VALIGN=TOP><td align='center'><img src=images/". $image ." style=\"width:100px;height:150px\"</td>" ;
  echo "<td><font color='black'><b>Listing Id:</b> ". $id. "<br><br>";
  echo "<b>Property Type:</b> ". $type. "<br><br>";
  echo "<b>Area (in Sq. ft.):</b> ". $area. "<br><br>";
  echo "<b>Description:</b><br>". $description. "</font></td></tr>";
echo "</table><br>";

$i++;
}
echo "<p align='left'>Page</p>";
for ($i=1; $i<=$last; $i++)
{
if (($i=="1") && ($i==$pagenum))
{
echo "<font size=3>";
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=1&amp;i=$id&amp;q=$q&amp;f=$field'>";
echo "<font size=5>";
echo $i;
echo "&nbsp;";
echo "</font>";
echo "</a>";
echo "</font>";
}
elseif (($i=="1") && ($i!=$pagenum))
{
echo "<font size=3>";
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=1&amp;i=$id&amp;q=$q&amp;f=$field'>";
echo $i;
echo "&nbsp;";
echo "</a>";
echo "</font>";
}
elseif (($i>1) && ($i!=$last) && ($i==$pagenum))
{
echo "<font size=3>";
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$pagenum&amp;i=$id&amp;q=$q&amp;f=$field'>";
echo "<font size=5>";
echo $i;
echo "&nbsp;";
echo "</font>";
echo "</a>";
echo "</font>";
}
elseif (($i>1) && ($i!=$last) && ($i!=$pagenum))
{
$next = $pagenum+1;
echo "<font size=3>";
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$i&amp;i=$id&amp;q=$q&amp;f=$field'>";
echo $i;
echo "&nbsp;";
echo "</a>";
echo "</font>";
}
elseif (($i==$last) && ($i==$pagenum))
{
echo "<font size=3>";
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$last&amp;i=$id&amp;q=$q&amp;f=$field'>";
echo "<font size=5>";
echo $i;
echo "&nbsp;";
echo "</font>";
echo "</a>";
echo "</font>";
}
elseif (($i==$last) && ($i!=$pagenum))
{
echo "<font size=3>";
echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$last&amp;i=$id&amp;q=$q&amp;f=$field'>";
echo $i;
echo "&nbsp;";
echo "</font>";
echo "</a>";
}
}

?> 

Open in new window

imranasif17Asked:
Who is Participating?
 
Brian TaoConnect With a Mentor Senior Business Solutions ConsultantCommented:
PHP has a function just for that: nl2br().
Change your line #74 to
echo "<b>Description:</b><br>". nl2br($description). "</font></td></tr>";

Open in new window

and you're good.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
The easiest solution is to wrap the text when it is displayed with a <pre> element. Otherwise you would need to run a routine in the form processor to replace line feeds with <br><br>. Or this same routine could be run on the displaying page.
<pre>The line feeds

in this text
will be displayed

on the web page.</pre>

Open in new window

I have seen a rich text editor which allows the user to include style formatting in their text entry. This editor can be embedded in a form page. But I haven't used it. You might search the web using the keywords "rich text editor".
0
 
imranasif17Author Commented:
Perfect.  Works great.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.