Necati Özmen Necati Özmen - 5 months ago 26
Javascript Question

Why is text disappear?

I'm coding a very simple chatbox. The text that I write in the form is not seen on the chat area. Actually ,it is seen for a second and after from chatarea. How can I keep the messages on the chat area ? (it works properly on the jsfiddle but not on my browsers)

$(document).ready(function() {
$("#submitMsg").click(function() {
var userMessages = $("#userMsg").val(); // stored content in the text box
var prevMessage = $("#chatArea").html();
$("#userMsg").val(""); // clear textbox
$("#chatArea").html(prevMessage + "<br>" + userMessages);

#wrapper {
padding-bottom: 25px;
background: #ACD8F0;
width: 604px;
border: 1px solid #ACD8F0;
#chatArea {
width: 450px;
border: 1px solid black;
height: 450px;
margin: auto;
background: #fff;
#userMsg {
position: relative;
left: 75px;
margin-top: 5px;
#submitMsg {
position: relative;
left: 80px;
font-size: 24px;

<script src=""></script>
<div id="wrapper">
<div id="header">
<p class="Welcome">Welcome</p>
<div id="chatArea"></div>
<form id="ChatInput">
<textarea id="userMsg" name="message" type="text" placeholder="Enter your text here.." rows="3" cols="50"></textarea>
<input type="submit" name="Send" value="SEND" id="submitMsg">


The problem lies in your submit button. Forms without an action specified default to a GET/POST request for the current page (thus reloading it). If you remove the 'type="submit" from <input type="submit" name="Send" value="SEND" id="submitMsg">, it should work. Alternatively, if you add action="javascript:void(0);" to your form tag, it should also solve the problem.