Solved

Format data and display in formatted manner

Posted on 2016-10-01
3
89 Views
Last Modified: 2016-10-02
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

0
Comment
Question by:imranasif17
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41824970
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
 
LVL 9

Accepted Solution

by:
Brian Tao earned 500 total points
ID: 41825098
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
 

Author Closing Comment

by:imranasif17
ID: 41825519
Perfect.  Works great.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question