User input textarea rendering \n\r instead of linebreak

Question

I have a textarea element on my personal website. It is used as a comment section, when users submit information, I automatically receive an email with the data. The problem that I am having is, whenever a user inserts a line break (by pressing return) the email will render something like this:

Hello Mike,\r\n\great website\r\n\keep in touch!\r\n\

Instead of:

Hello Mike,
Great Website
keep in touch!

Here is my code, was wondering if anyone can help me! Thank you

<?php
// This connects to database
$connection = mysqli_connect ('localhost', 'username', 'password', 'database');
$message_sent = false;
function updateForm () {
    global $connection;

    if ( isset ($_POST['submit'])) {

        if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        global $connection;
        $name = $_POST['name'];
        $email = $_POST['email'];
        $userComment = $_POST['comment'];
        
        $name = mysqli_real_escape_string($connection, $name);
        $email = mysqli_real_escape_string($connection, $email);
        $userComment = mysqli_real_escape_string($connection, $userComment);
    
        // Submits email code
        $to = "michaelrivasnyc@gmail.com";
        $subject = "You have a new form submission";
        $body = "";
        $body .= "From: ".$name. "\r\n";
        $body .= "email: ".$email. "\r\n";
        $body .= "message: ".($userComment). " ";
        

        // email information going to be sent to user

        $userSubject = "Thanks for submitting form.";
        $userBody = "Thank you for submitting form on michaelrivas.net, we will be in touch.";

        mail($to, $subject,$body);

        mail($email, $userSubject, $userBody);

        $message_sent = true;

        } else {
            $message_sent = false;
        }

        $name = mysqli_real_escape_string ($connection, $name);
        $email = mysqli_real_escape_string ($connection, $email);
        $userComment = mysqli_real_escape_string ($connection, $userComment);
    
    $query = "INSERT INTO email (names, email, comment) ";
    $query .= "VALUES ('$name' , '$email' , '$userComment') ";
    $result = mysqli_query($connection, $query);

    if (!$result) {
       die('Connection error' . mysqli_error ());
    } else {
        echo "<br>" . "<br>" . "You have been added to my email list, Thanks for staying in touch";
            }
        }
}



?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126337947-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126337947-3');
</script>

    <!-- Icons, scripts, CSS, and other attachments. These should be the same
        for all pages minus the <header> class with is the front page photo -->
                        
    <link href="images/radio-tower.png" rel="icon" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Timmana" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="JS/JS4web.js"></script>
</head>

<fie>
                        <title>Michael Rivas</title>
<!-- Top Navigation Menu -->
<div>

    <div class="navBar">
      <a href="#home" class="active"></a>
      <div id="myLinks">
        <a href="https://michaelrivas.net/index.html">Home</a>
        <a href="https://michaelrivas.net/projects.html">Projects</a>
        <a href="https://michaelrivas.net/contactform.php">Contact</a>
      </div>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    
</div>

<h1 id="textAboveForm">Keep in touch</h1>
<div id="formFields">
    <form action="contactform.php" method="post" >

        <input style="font-size: 16px;" id="firstnameinput" type="text" name="name" placeholder="Name" required>

        <input style="font-size: 16px;" id="emailinput" type="text" name="email" placeholder= "email" required>
            <br>
    <textarea id="commentBox" name="comment" placeholder= "Drop a note"></textarea>
        <br>
        <input id="submitbutton" type="submit" name= "submit" value= "Submit">

<?php updateForm ();?>
        </form>  
</div>
    </body>
</html>

Please share more details - for example, why dou you put a string into the mail body that you piped through `mysqli_real_escape_string`? Is there any reason not to use the proper string, inputed by the user? — Nico Haase, Feb 01 '21 at 16:01
Also, inserting in the database should nowadays be done through prepared statements such that your query is not vulnerable to SQL injections — Nico Haase, Feb 01 '21 at 16:02
You have an error. [`mysqli_error()`](https://www.php.net/manual/en/mysqli.error.php) needs one argument. Please consider switching error mode on instead. [How to get the error message in MySQLi?](https://stackoverflow.com/a/22662582/1839439) — Dharman, Feb 01 '21 at 16:15

score 0 · Answer 1 · answered Feb 01 '21 at 16:19

You are misusing mysqli_real_escape_string(). It would be best that you forget this function even exists. It is the root cause of your problem. Remove it from your code and use parameterized prepared statements.

$name = $_POST['name'];
$email = $_POST['email'];
$userComment = $_POST['comment'];

// send an email

$query = "INSERT INTO email (names, email, comment) VALUES (? , ? , ?) ";
$stmt = $connection->prepare($query);
$stmt->bind_param('sss', $name, $email, $userComment);
$stmt->execute();

User input textarea rendering \n\r instead of linebreak

1 Answers1