I have this html form, with 2 input fields, username and password. After I click the button, I want a message to say at the top of the form: "Invalid username or password" if it is wrong, or "Successful" if it is ok, instead of "Login required". The problem is, when I click, I get the message, but only for a fraction of a second, then it goes back to "Login required". How can I make it stay there?
HTML:
<div id="chat">
<form>
<div>
Login required
</div>
<input type="text" id="username" placeholder="username">
<input type="password" id="password" placeholder="password">
<button>Authenticate</button>
</form>
</div>
JS:
$('#chat form button').click(function(){
var msg= $('#chat form div');
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
if(user == "admin" && pass == "admin1234")
msg.html("Successful");
else
msg.html("Invalid username or password");
})
I tried with both .click and .submit functions, but same result.
