Question

The question is:
How to save user input linebreak to database. (jQuery/php/mysql)

I have a paragraph which is editable by the user.

<p contenteditable="true" id="forbiddenField">Text</p>

When I retrieve data from db with this:

<p contenteditable="true" id="forbiddenField"><?php echo nl2br($forbidden); ?></p>

and that works great.

onblur (.blur) will activate a jQuery script which will send the new edited data to a database.

$("#forbiddenField").blur(function(){
        var whatIsNowForbidden = encodeURI($("#forbiddenField").text());

        $.ajax({
            type: "POST",  
            url: "updateForbidden.php",  
            data: "forbiddenStuff="+ whatIsNowForbidden,
            success: function(){
            }  
        });
});

Problem:
If the user inserts new data, with linebreaks, then the linebreaks are not added to the data in the database, only the content is added.

I tried this among other things:
var whatIsNowForbidden = encodeURI($(“#forbiddenField”).text());

I looked at theese places for answers:
New Line in Textarea to be converted to <br/>
http://www.w3schools.com/tags/ref_urlencode.asp
Is replacing a line break UTF-8 safe?
how to escape input but save unescaped into the database
How to recognize every linebreak?

I can’t get it to work.
All input and hints are much appreciated!

Answer 1

Try removing the encodeURI() function from your javascript, like so:

var whatIsNowForbidden = $("#forbiddenField").text();

I made a fiddle to test this and javascript’s encodeURI() function doesn’t seem to translate the new lines made in the paragraph to %0A, like we were expecting to.

By removing the function encodeURI() PHP should be able to save the text, including new lines, to the database. And then, PHP’s nl2br() should transform the new lines into <br /> tag’s with no problem.

The fiddle is available here: http://jsfiddle.net/LN7QC/

Final answer: use <textarea>

The jQuery:

$("#forbiddenField").blur(function(){
        var whatIsNowForbidden = $("#forbiddenField").val();

        $.ajax({
            type: "POST",  
            url: "updateForbidden.php",  
            data: "forbiddenStuff="+ whatIsNowForbidden,
            success: function(){
            }  
        });
});

adding to database:

<?php
    include('connect.php');

            if($_POST['forbiddenStuff']){
                $forbiddenInput = $_POST['forbiddenStuff'];
            }


    If($forbiddenInput){
        mysql_query("SET NAMES 'utf8'");
        $changeDataInDB = "UPDATE heroes_and_helpers SET forbidden='$forbiddenInput' WHERE name ='sabina'";
        mysql_query($changeDataInDB);

    }
?>

fetching from database:

   mysql_query("SET NAMES 'utf8'");
    $fetchForbidden = mysql_query("SELECT * FROM heroes_and_helpers WHERE name='sabina'");

        if (!$fetchForbidden)
          {
          die('Ngt ar fel: ' . mysql_error());
          }

    $whatIsForbidden = mysql_fetch_array($fetchForbidden); 
    $forbidden = $whatIsForbidden['forbidden'];

on the site:

<textarea id="forbiddenField" style="width: 450px; height: 500px;"><?php echo $forbidden; ?></textarea>