Necati Özmen Necati Özmen - 1 month ago 7
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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="wrapper">
<div id="header">
<p class="Welcome">Welcome</p>
</div>
<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">
</form>
</div>




Answer

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.