So as you can read in my title, I am trying to Clear my Textarea after I submitted my Chat Message to my DB. I tried it several ways, like setting the value to null (""), which just lead to another problem, the Textarea gets cleared before PHP can insert the Value of the Textarea into the DB.
Here's my code:
<?php
include_once("../workspace/dbFunction.php");
//make an array for anime
$last_added = mysqli_query($mysqli,'SELECT * FROM anime ORDER BY `anime`.`created_at` DESC LIMIT 8');
$last_add = array();
while($row = mysqli_fetch_assoc($last_added)){
$last_add[] = $row;
}
//make array for anime
$data_arr = mysqli_query($mysqli,'SELECT * FROM anime');
$latestAnime = array();
while($row = mysqli_fetch_assoc($data_arr)){
$latestAnime[] = $row;
}
// Make lates episodes arr
$lat_ep = mysqli_query($mysqli,'SELECT * FROM episodes ORDER BY `created_at` DESC');
$latestEpisode = array();
while($row = mysqli_fetch_assoc($lat_ep)){
$latestEpisode[] = $row;
}
$random = $mysqli->query('SELECT * FROM anime ORDER BY RAND() LIMIT 1');
$count = 1;
?>
<?php include_once "../includes/header.inc.php"; ?>
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<link rel="stylesheet" href="../css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="includes/utils/chat/css/main.css">
<script >
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if(req.readyState == 4 && req.status == 200){
document.getElementById('chat').innerHTML = req.responseText;
}
}
req.open('GET','includes/utils/chat/chat.php',true);
req.send();
}
setInterval(function() {ajax()}, 1000);
</script>
<style>
/* Carousel */
.owl-carousel .carousel-item-o {
background: #fff;
border: 1px solid #D9D7DA;
text-align: center;
}
.owl-carousel .carousel-item-text {
padding: 12px;
}
.owl-carousel .carousel-item-o .item-kicker {
color: #9A5053;
display: block;
font-size: .8em;
font-weight: 600;
height: 30px;
margin-bottom: 16px;
overflow: hidden;
text-transform: uppercase;
}
.owl-carousel .carousel-item-o .item-title {
color: #646464;
font-size: 1em;
font-weight: 600;
height: 38px;
margin: 0;
overflow: hidden;
}
.owl-dots {
margin-top: 40px;
text-align: center;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127, 127, 127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127, 127, 127, 1);
}
</style>
<?php include_once "../includes/nav.inc.php"; ?>
<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/includes/parallax.inc.php"); ?>
<body class="elegant-color" onload="ajax();">
<div class="container-fluid" style="width:80%;">
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
<div id="new_releases">
<p class="h2 text-white">Neuste Folgen</p>
<div class="row">
<?php foreach($latestEpisode as $lat_ep){ ?>
<?php foreach($latestAnime as $row) { ?>
<?php if( $lat_ep['anime_id'] == $row['id'] && $row['calender_id'] != 0){ ?>
<?php $count++; ?>
<div class="col-md-3 mb-3">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view" style="height:100%;">
<img src="<?php echo $row['img']; ?>" class="card-img-top" alt="photo">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title"><a href="/anime/show.php?url=<?= htmlspecialchars($row['url']) ?>&id=<?= $row['id'] ?>&nr=<?= $lat_ep['nr'] ?>"><?= $lat_ep['name'] ?></a></h4>
<p class="text-muted m-0">Folge <?= $lat_ep['nr'] ?></p>
<span class="h6"><?= $row['name'] ?></span>
</div>
</div>
<!--/.Card-->
</div>
<?php } ?>
<?php if($count == 1){ ?>
<?php break; ?>
<?php } ?>
<?php }?>
<?php } ?>
</div>
</div>
</div>
<div class="col-md-12">
<div id="new_releases">
<p class="h2 text-white">Zuletzt Hinzugefügt</p>
<div class="row">
<?php foreach($last_add as $row) { ?>
<div class="col-md-3 mb-3">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view" style="height:100%;">
<img src="<?php echo $row['img']; ?>" class="card-img-top" alt="photo">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title"><a href="/anime/show.php?url=<?= htmlspecialchars($row['url']) ?>&id=<?= $row['id'] ?>"><?php if($row['su'] == 'sub'){echo $row['name'] . " Ger Sub";} elseif($row['su'] == 'dub'){ echo $row['name'] . " Ger Dub";} ?></a></h4>
<!--Text-->
<p class="card-text"><?php if (strlen($row['description']) > 79){ echo $str = substr($row['description'], 0, 80) . '...';}else{echo $row['description'];}; ?></p>
</div>
</div>
<!--/.Card-->
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="ibox-content elegant-color mt-2">
<div class="row elegant-color">
<div style="margin: 0 auto;" class=" col-md-12 elegant-color">
<div class="chat-discussion elegant-color">
<div class="chat-message left">
<div id="chat"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row elegant-color" style="margin: 0 auto;">
<div style="margin: 0 auto;" class="col-md-12">
<iframe name="votar" style="display:none;"></iframe>
<form method="POST" id="form" target="votar">
<?php
if(isset($_SESSION['username']) && !empty($_SESSION['username'])){
echo '<textarea name="message" class="area" id="area" placeholder="Enter your message" required="" value=""></textarea>';
echo '<button type="submit" style="margin: 0 auto;" style="color: white;" class="btn btn-block btn-success w-50" name="submitbtn">Send It</button>';
} else {
echo '<center><h5 class="white-text" style="margin: 0 auto;">Please login to send messages!</h5></center>';
}
?>
</form>
</div>
</div>
<hr>
<?php include_once "../includes/sidebar.inc.php"; ?>
</div>
</div>
</div>
<?php include_once "../includes/footer.inc.php"; ?>
<?php
if(isset($_POST['submitbtn'])){
$typeOfClear = "";
$name = $_SESSION['username'];
$message = $_POST['message'];
$query = "INSERT INTO chat (name, message) VALUES ('$name','$message')";
$run = $mysqli->query($query);
if($run){
echo "<audio src='includes/utils/chat/sounds/notification.mp3' hidden='true' autoplay='true' volume='0.5'/>";
echo "<script>document.getElementById('area').value = '';</script>";
}
}
?>
<?php include_once "../js/general.script.php"; ?>Everything works, except that the Textarea won't clear itself, and no... I don't want to redirect anywhere nor do I want to refresh the page.
Thanks to everyone that can and will help me! :)
</div>
