I have the following chat room code:
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <?php session_start(); ?> <script> function getText() { var $a = document.getElementById('text').value; xhr = new XMLHttpRequest(); xhr.open('POST' , 'chatdb.php',true); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send('chat='+$a); xhr.onreadystatechange=function(){ if (xhr.responseText){ // document.getElementById('chatarea').innerHTML=xhr.responseText; } } } function setText(){ xhr = new XMLHttpRequest(); xhr.open('POST' , 'chatFetch.php' , true); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send(); xhr.onreadystatechange = function(){ // alert(xhr.responseText); document.getElementById('chatarea').innerHTML = xhr.responseText; } } setInterval("setText()",1000); setInterval("users()",1000); </script> <?php include_once('config.php'); // echo $_SESSION['email']; // echo $_SESSION['password']; echo $_SESSION['name']; if (isset($_GET['logout'])){ $result = mysqli_query($conn, "UPDATE user SET user_status = '0' WHERE user_email = '$_SESSION[email]';"); session_destroy(); header('location: practice.php?logout_successfully=<span style="color:green">You have successfully Logged Out.</span>'); } ?> <form action=""> <input type="submit" name="logout" value="logout"> </form> <style> </style> <?php if(!isset($_SESSION['email']) && !isset($_SESSION['password'])){ //session_destroy(); header('location: practice.php'); } ?> <div class="container"> <div class="row"> <div class="col-md-5"> <div class="panel panel-primary"> <div class="panel-heading" id="accordion"> <span class="glyphicon glyphicon-comment"></span> Chat <div class="btn-group pull-right"> <a type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span class="glyphicon glyphicon-chevron-down"></span> </a> </div> </div> <div class="panel-collapse collapse" id="collapseOne"> <div class="panel-body"> <ul class="chat"> <div id ="chatarea"> </div> </ul> </div> <div class="panel-footer"> <div class="input-group"> <input id="text" type="text" class="form-control input-sm" placeholder="Type your message here..." /> <span class="input-group-btn"> <button onclick="getText()"class="btn btn-warning btn-sm" id="btn-chat"> Send</button> </span> </div> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> Every time you write a message, you need to scroll yourself to see the sent message and after sending the message, in the input text you just have to erase it yourself how to make sure that messages are erased after sending
