Q:

Textarea not storing the newline in update with ajax

I have some text stored in mysql table in below format:

This is the demo line 1
This is the demo line 2
This is the demo line 3
This is the demo line 4
This is the demo line 5

but, when I update any line in the text area, it displays the below output.Actually, I'm trying to make a text file with this if I don't update it to output me the above content in a text file but, When I update the content to give me the below output in the text file.
Here is my code:

This is the demo line 1
  This is the demo line 2This is the demo line 3This is the demo line 4This is the demo line 5

<table>
<tr class="head">
<th style="display: none">Lable Name</th>
<th style="display: none">Tag Details</th>
</tr>
<?php
$sql1 = "SELECT * from tagto_print where print_tag_id='8'";
$reslabel=mysql_query($sql1);
$i=1;
while($row=mysql_fetch_array($reslabel))
{
$printid=$row['print_tag_id'];
$tagdetailstoprint=$row['print_tag_details'];
?>
<tr id="<?php echo $printid; ?>" class="edit_tr">
<td width="10%"><?php echo $row['print_tag_labelname'];?></td>
<td width="50%" class="edit_td">
<span id="details_<?php echo $printid; ?>" class="text"><pre><?php echo $tagdetailstoprint; ?></pre></span>
<textarea  class="form-control" id="details_input_<?php echo $printid; ?>" rows="8"> <?php echo $tagdetailstoprint; ?></textarea></td>
</tr>
<?php
$i++;
}
?>
</table>
<style>
.form-control
{
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#details_"+ID).hide();
$("#details_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var tagdetailsarea=$("#details_input_"+ID).val();
var dataString = 'printid='+ ID +'&printdetails='+tagdetailsarea;
$("#details_"+ID).html('<img src="load.gif" />');
if(tagdetailsarea.length>0)
{
$.ajax({
type: "POST",
url: "print-tags-edit.php",
data: dataString,
cache: false,
success: function(html)
{
$("#details_"+ID).html(tagdetailsarea);
}
});
}
else
{
alert('You can not Print Blank Data');
}

});
$(".form-control").mouseup(function() 
{
return false
});
$(document).mouseup(function()
{
$(".form-control").hide();
$(".text").show();
});
});
</script>

File to update print-tags-edit.php:
<?php 
if($_POST['printid'])
{
$id=$_POST['printid'];
$details=$_POST['printdetails'];
$sql = "update tagto_print set print_tag_details='$details' where print_tag_id='$id'";
mysql_query($sql);

}
?>

A:

I sorted my problem. This solution is mix of many references. I fetched the record from the table and put the (br) in content
$tagdetailstoprint=$row['print_tag_details'];
$breaks = nl2br($tagdetailstoprint); 
$text = str_replace($breaks, "\r\n", $tagdetailstoprint);

In my textarea, I did this:
   <textarea  class="form-control" id="details_input_<?php echo $printid; ?>" rows="8"> <?php echo  htmlspecialchars($text); ?></textarea>

and in style, I added the style sheet suggested by the AND
<style>
.text{
white-space: pre-line;
}
</style>

In my file to update print-tags-edit.php,  I did this:
$details=nl2br($_POST['printdetails']); // i stored the nl2br in my mysql table

This code is to create the text file:
$today = date("Y-m-d-Hi");
    header("Content-type: application/octet-stream");
    header("Content-Disposition: attachment; filename=".$today."_Backup.txt");
    $query = "SELECT * FROM tagto_print where print_tag_id='8'";
    $result = mysql_query($query);
    $data = "";
    $breaks = array("<br />","<br>","<br/>"); // i put the br in array
    while ($row=mysql_fetch_object($result)) {
    $text = str_replace($breaks, "\r\n", $row->print_tag_details); // and repalced it with the "\r\n" 
    $data .= "{$text}";
    $data .="\r\n";
    }
    echo $data;
    exit;
    }

