Silly question, but WHY? Why not just have it stay in the existing form?!?
That said, you're in pure "JS for nothing" territory if this is for a website, so you'd trap the onsubmit of the form (assuming normal submission and not AJAX) and just copy the textarea.value over from one to the other.
Might also help if you had proper semantics in your HTML... like where's your fieldset? Your label? You do know that placeholder is not a label, right?
The endless pointless DIV for nothing, endless pointless (presentational) classes for nothing, static style in the markup, and host of other failings probably aren't helping matters much either. The SCRIPT your PHP is generating should be inside HEAD or BODY (preferably the latter) and is certainly invalid gibberish if output before the HTML tag is even open, the lack of a doctype can cause HTML and JavaScript to misbehave, this is 2018 you can stop saying type="text/JavaScript", you really shouldn't be needing to try/catch on normal SQL operations -- just do that on the connect and let normal excepetions handle the rest. You try to strip_tags before you even check if the $_POST value EXISTS... rather than stripping tags I'd htmlspecialchars it on the output side...
Oh, and should that second area even BE a form? looks more like an output that you would NOT be editing -- meaning the scripting to handle it should be just creating a textnode and any appropriate wrapping elements.
Looking at this, it appears to be a simple chat-like program. In that case I would first make it work WITHOUT JavaScript, then enhance it with scripting.
To that end I'd have a "sendMessage.php" that would look something like this:
<?php
/*
sendMessage.php
Can be called directly via AJAX, or from a form.
If the latter, $_POST['fromForm'] should be set.
*/
if (!isset($dbh)) include('database.php');
// I prefer array_key_exists over isset, just makes more sense to me
if (array_key_exists('message', $_POST)) {
if (empty($$_POST['message'])) {
if (array_key_exists('fromForm', $_POST)) {
echo '<script>alert("Please fill field");</script>';
} else {
// in THEORY this should never happen, but just in case
http_response_code(204); // No content
die();
}
} else {
$stmt = $dbh->prepare('INSERT INTO messages ( user_post ) VALUES ( ? )');
$stmt->execute([$_POST['message']]);
if (array_key_exists('fromForm', $_POST) {
echo
$stmt->rowCount() ?
'<p class="resultOk">Message added</p>' :
'<p class="resultFailure">Failed to insert message</p>';
} else {
http_response_code($stmt->rowCount() ? 201 : 304);
die();
}
}
} else if (!array_key_exists('fromForm', $_POST) {
http_response_code(400);
die();
}
The key here being we can set our AJAX enhanced send to NOT include a hidden input saying we came from the form, letting us use this same PHP routine for both scripting on and off responses. I leverage HTTP status codes so that we don't have to waste bandwidth sending excess data back and forth.
The normal functioning page would be thus:
<?php
header('Content-Type: text/html; charset=utf-8');
?><!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>PHP Chat Demo</title>
</head><body>
<form method="post" action="" id="sendMessage">
<fieldset>
<label for="sendMessage_text">share your failures</label><br>
<textarea id="sendMessage_text" name="message" required><br>
<button id="sendMessage_submit">SHARE</button>
<!--
in production code I would have a random hash validated against the
session as the value on our 'fromForm'
-->
<input type="hidden" name="fromForm" value="1">
</fieldset>
</form>
<div id="messages">
<?php
include('sendMessages.php'); ?>
// show ten most recent messages
if (!isset($dbh)) include('database.php');
// assuming auto incrementing ID for most recent sort
$stmt = $dbh->query('
SELECT user_post
FROM messages
ORDER BY id
LIMIT 10
');
while ($message = $stmt->fetchColumn()) echo '
<div>', htmlspecialchars($message), '</div>';
?>
<!-- #messages --></div>
<script src="messageAjax.js"></script>
</body></html>
For that scripting, something along these lines:
(function(d) {
var
messageForm = d.getElementById('sendMessage'),
messageInput = d.getElementById('sendMessage_text'),
messageOutput = d.getElementById('messages'),
messageSubmit = true;
function submitHandler(e) {
// prevent HTML send
e.preventDefault();
if (messageSubmit) {
// prevent further user input until send complete
messageSubmit = false;
if (messageInput.value) {
// doing a 'new' allows for multiple instances with the same wrapper
var x = new XMLHttpRequest();
x.onreadystatechange = function() {
if (x.readyState == 4) {
switch (x.status) {
case 201:
messageOutput.appendChild(
d.createElement('div')
).appendChild(
d.createTextNode(messageInput.value)
);
messageInput.value = false;
break;
case 204:
alert('Somehow we sent no form data... this shouldn't happen!');
break;
case 304:
alert('Failed to insert message, try sending again.');
break;
case 400:
alert('No POST data send, possible hacking attempt?');
break;
default:
alert('Unhandled status code ' + x.status);
}
// re-enable input
messageSubmit = true;
}
}
x.open('post', 'sendMessage.php');
x.send('message=' + encodeURIComponent(messageInput.value));
} else { // input was empty
// technically we shouldn't have to do this as we used 'required'
// but older browsers don't know that, so handle it.
alert('You must enter a message');
}
}
}
messageForm.addEventListener('submit', submitHandler, false);
})(document);
Mind you this is all untested, may have typo's and the like, but should give you a decent idea of the process -- in particular handling it BOTH scripting off and scripting enhanced so you are properly progressively enhancing the page instead of telling large swaths of users to go f* themselves.
In normal practice I wouldn't be opening and closing PHP so much, there would be user validation, session validation, and a whole host of other things, but as a general outline of the communication process this should get you at least started.
Hope that helps.