Question

$("#singlechatpanel-1 #sendMessage").click(function(Event)
{
Event.preventDefault();
$("#singlechatpanel-1 .subpanel ul").append('<li><span><img src="./images/chat-thumb.gif"/>Aristona: Test message.</span></li>');
});



<form name="chatForm" id="chatform">
 <input type="text" id="message" name="message"><br>
 <input type="button" name="sendMessage" id="sendMessage" value="Send Message">
</form>

When I click on button with mouse, it normally sends the data, but if I press enter while typing something into textbox, page refreshes and URI goes to message?what_I_typed.

How to prevent it? I need to use enter button since it is a chat application.

Answer 1

Bind to the form’s submit event instead.

$("#chatform").submit(function(e) {
    e.preventDefault();
    $("#singlechatpanel-1 .subpanel ul").append('<li><span><img src="./images/chat-thumb.gif"/>Aristona: Test message.</span></li>');
});