Remove white space from Text-Area , Why is it there? - php

Question

I would like to understand why my <textarea> box contains white space when I land on the page. I have put in place an if(empty ($_POST['textarea']) to check if it has text before submission. I couldn't get the if(empty ($_POST['textarea']) to work at first until I noticed white space in the <textarea>. As soon as I remove the white space the if(empty ($_POST['textarea']) condition works.
Before I ever click into the textarea there's already white space - Why is this happening and how can I prevent it?
Here is my code.
Text-Area:
echo '<div id="container">
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" >
</textarea>
</div>
I'm using jQuery to send via AJAX:
<script src="js/jquery.js"></script>
<div id="showResult"></div>
<script>
$(document).ready (function()
{
// Focus on textarea
$('#name').focus();
// '#msg' id of button
$('#msg').on('click', function() {
//to disable button after click
this.disabled = true;
// '#name' is the id value of textarea name
var info = $('#name').val();
$.ajax ({
method: "POST",
url: "actions/message_action.php",
//pass my variables to ajax - jq here in data name:
data: {name: info, recptid: '<?php echo $_GET["id"]; ?>'
},
//feed the success my data to return results
success: function(data){
$('#data').append(status);
$("#showResult").text(data);
//window.alert(data);
$('#data').val('Sent');
}
});
return false;
});
});
</script>

Answer 1

The white space is generated by the way you have formatted your HTML:
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" >
</textarea>
This creates a space and newline in the textarea. Change your HTML to this:
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" ></textarea>
EDIT
I can see that you have named your textarea name, which indicates to me that you might want to use a <input type="text"> instead, since textareas are for multiline text.

Answer 2

Use can use trim to remove whitespace in your textbox, before and after possible content:
var info = $('#name').val().trim();

Answer 3

It's because you have space in between
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" >// this creates space
</textarea>
Use
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" ></textarea>

Answer 4

Try putting the closing </textarea> tag on the same line removing the white space.