Php echo shows the br tag

Question

I have an HTML form. When you click on the submit button it stores the data from the boxes into a table and then displays a message. the message is sent from a PHP file then it is displayed by js in an HTML file. The problem is that the message has br tags in it and when the message is displayed it shows the <br> tag instead of breaking the line.

This is where i am testing it - http://ft5.cu.cc/ Click on the heart logo to see the form.

HTML FORM

<div class="contact">
            <form method="post" action="daalo.php">
                <input type="text" maxlength="30" class="text" name="ign" id="ign" placeholder="Please type your IGN(In Game Name)" required="required"/>
                <input type="email" maxlength="30" class="required email" name="email" id="email" placeholder="Please type your email" required="required"/><span class="status"></span>
                <table width="100%">
                <tr>
                <td><input type="text" maxlength="30" class="text" id="steamid" name="steamid" placeholder="Enter your Steam ID" required="required"/></td>
                <td><span class="status">
                <img id="tick" alt="Good"src="images/tick.png" width="16" height="16"/></td>
                </tr>
                </table>
                <span id="cross">Steam Id Already Added</span>
                </span>
                <input type="submit" name="register" id="register" value="Submit" disabled="disabled" />
            </form>
            <div id="loading">Processing your <b>WHITELIST</b> entry....</div>
        <div id="success"></div>
    </div>

*Php Insert*

<?php
include('connecti.php'); //Ganja Login


 // Check connection
 if (mysqli_connect_errno())
   {
   echo 'Failed to connect to MySQL: ' . mysqli_connect_error();
   }

//Insert
$lab1='IGN<br>'; 
$lab2='Email ID<br>'; 
$lab3='Steam ID<br>';
$lab4='Submitted.';
$lab5='Whitelist is updated everyday at 8pm (UTC+01:00) Brussels, Copenhagen, Madrid, Paris.';

$sql="INSERT INTO rusty_whitelist (name, email, steamid) VALUES ('$_POST[ign]','$_POST[email]','$_POST[steamid]')";

 if (!mysqli_query($con,$sql))
   {
   die('Error: ' . mysqli_error($con));
   }
    echo $lab1;
    echo $lab2;
    echo $lab3;
    echo $lab4;
    echo $lab5;

 mysqli_close($con);
 ?>

Java Script

(function($) {
$('form').submit(function(e){
    var thisForm = $(this);
    e.preventDefault();
    $(this).fadeOut(function(){
        $("#loading").fadeIn(function(){
            $.ajax({
                type: 'POST',
                url: thisForm.attr("action"),
                data: thisForm.serialize(),
                success: function(data){
                    $("#loading").fadeOut(function(){
                        $("#success").text(data).fadeIn();
                     });
                }
            });
        });
    });
});
$('.md-trigger').tipsy({gravity: 's'});
})(jQuery);

$(function(){
  $().ready(function() {
    $('#videobg').tubular({videoId: 'tDvBwPzJ7dY'}); // where idOfYourVideo is the YouTube ID.
  });
});

Answer 1

I think the issue is how you are using the value returned by Ajax into your code. Instead of using the jQuery .text() method, try the .html() method.

Answer 2

As I suspected in my comment, you are setting the textContent property of an element object (or the DOM Level 2 equivalent of that) by means of jQuery's text() method.

You need to call the html() method instead to set the innerHTML property (or the equivalent of that).