index.php
<script>
function submitChat() {
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','insert.php?uname=<?php echo $uname ?>'+'&msg='+msg,true);
xmlhttp.send();
}
$(document).ready(function(e){
$.ajaxSetup({
cache: false
});
setInterval( function(){ $('#chatlogs').load('logs.php'); }, 2000 );
});
</script>
<div id="style-16"
style=' overflow-x: scroll; overflow-y: hidden; width: 100%; display: flex;padding: 7px; border: 4px solid black;border-radius: 5px; '>
<?php for ($i = 0; $i < count($userarray); $i++) { ?>
<div class='boom' data-target="#booming<?php echo $userarray[$i] ?>"
style='white-space: nowrap;margin-top:20px;color: #605ca8;font-size: 1.5em;background-color: white;display: inline-block; padding:10px 10px 10px 10px;border-radius: 10px; margin-left:5px'> <?php echo $username[$i] ?></div>
<?php } ?>
</div>
<br>
<form name="form1">
<?php for ($i = 0; $i < count($userarray); $i++) { ?>
<textarea name="msg" id="booming<?php echo $userarray[$i] ?>" class="booming"
style="display:none; max-width: 100%; width: 100%;min-width: 100%">
</textarea>
<?php } ?>
<a href="#" onclick="submitChat()">Send</a><br/><br/>
</form>
<div id="chatlogs">
LOADING CHATLOG...
</div>