I am having trouble getting my website to display a database entry correctly. I am copying and pasting formatted text with line breaks into my MySQL database. If I view the entry in terminal it will display the information correctly with the line breaks. When I view in the browser though It is all output as though it ignores all formatting rules and makes it one long string of text that just hits the edge of the DIV and creates a new line with no formatting what so ever. I am new to this so if my question seems vague I apologize in advance just ask for any additional information you might find useful to provide an accurate solution.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Test Site!
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK href="CLLProfile.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
// Roshan's Ajax dropdown code with php
// This notice must stay intact for legal use
// Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
// If you have any problem contact me at http://roshanbh.com.np
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCategory(CatID) {
var strURL="Categories.php?category="+CatID;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('categorydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(CatID) {
var strURL="SubCategories.php?category="+CatID;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subcategorydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
</head>
<body>
<div id="wrapper">
<div class="container">
<div id="header">
<a href="index.php"><img src="images/Logo.jpg"></a>
<div class="login">
<a href="register.php">Sign Up</a> <a href="main_login.php">Login</a>
</div>
<div class="search">
<form id ="search" action="" method="post" enctype="multipart/form-data">
<label>Search:</label>
<input type="text" name="searchBox" id="searchBox" />
<input type="submit" id="Submit" value="Submit" />
</form>
</div>
</div>
<div class="navigation">
<form id ="categoryForm" action="businesses.php" method="post">
<div id="categorydiv">
<select name="thing" onChange="getSub(this.value)">
<option value=0>Select Main Category<?=$options?>
</select> </div>
<div id="subcategorydiv">
<select name="subCats" >
<option>Select Sub Category</option>
</select></div>
<input type="submit" value="Submit" id="Submit" />
</form>
</div>
<div class="content">
<?PHP
echo "<img src=" . "users/" . $username . "/images/" . $logo . " " . "width=" . "200" . " " . "height=" . "auto" . " " . "border=" . "0" . "/>" . "</a>" . "<br>";
?>
<div class="description">
<?PHP
echo "<h2>" . $name . "</h2>";
echo "<p>" . $description . "</p>";
?>
</div>
</div>
</div>
</div>
</body>
</html>
Text Im pasting into MySQL database it is output in the description field:
In 1930, Charles Hyde and David Vredenburg opened a small general store in Beaconsfield, Iowa. That store grew to become Hy-Vee – a company known for excellent service and low prices. As an employee-owned company, Hy-Vee encourages each of our more than 56,000 employees to help guide the company.
Our outstanding success demonstrates their hard work and clear vision. Through their efforts, the name Hy-Vee has become synonymous with quality products, low prices and superior customer service. Our slogan, “A Helpful Smile In Every Aisle,” expresses the foundation of our corporate philosophy.
Hy-Vee is a touchstone for Midwest consumers’ desire for information on diet, nutrition and wellness topics. HealthMarket departments featuring natural and organic products; the consulting services of in-store dietitians; the NuVal Nutritional Scoring System; consumer and employee wellness programs; and the Hy-Vee Triathlon underscore the company’s commitment to healthy lifestyles.
Our corporate office is located in West Des Moines, Iowa. The Hy-Vee campus includes a 12,000-square-foot conference center for meetings, training and continuing education programs.
Our distribution operations are based in Chariton, Iowa, where we have more than 1.5 million square feet of state-of-the-art warehouse space. Another large distribution center, encompassing 650,000 square feet of space for dry food products and general merc, is located in Cherokee, Iowa.
With sales of more than $7.3 billion and more than 235 retail stores across eight Midwestern states, Hy-Vee ranks among the top 20 supermarket chains and the top 50 private companies in the United States. Supermarket News, the authoritative voice of the food industry, has honored the company with a Whole Health Enterprise Award for its leadership in providing services and programs that promote a healthy lifestyle.
For that you can use
nl2br()which replaces\r\nor\nwith a<br />:Outputs
So in your code, change it to:
I also added
htmlentities()to prevent XSS and encode special characters with the correct HTML entity.