Hidden submit button wont submit in chrome when enter is pressed

I have a problem with a hidden submit button. I have an input fiel开发者_JS百科d I use for an Ajax(jQuery) chat, people should enter text and press enter to submit. This works fine in Firefox but not in chrome, I think it treats it as if it's not there.

I'm using the following code:

$('#CommentChatForm').submit(function(event){ 
    ...
}

And I use this to hide the submit button:

$('#CommentChatForm input:submit').hide();

Which makes the HTML look like this:

<div class="submit">
    <input type="submit" value="Submit" style="display: none;">
</div>

I've also tried using keypress() by adding the following on top:

$('#CommentMessage').keypress(function(e){
    if(e.which == 13){
        $('#CommentChatForm').submit();
    }
})

This makes it work fine in Chrome but in Firefox it causes it to submit twice instead of once.

Sometimes you don't have control of HTML being generated by some widget or a module, so you style things with CSS. This was the case with me too. If found that in Chrome it works if you use

visibility:hidden;

but not if you use

display:none;

In FireFox it works either way. Hope this will be helpful to somebody.

If you use the keypress handler you won't need the hidden submit button, so just remove it.

If you don't want to display it, then don't add it in html.

html:

<form id="form" onsubmit="my_submit()">
<input type="text" id="msg" />
</form>

javascript:

function my_submit(){
    var msg = $('#msg').val();
    ....
    submit_on_my_own(msg);
    ...
    return false;
}

I'm doing this way and without Submit button.

$(document).ready(function()
{
    $('#Username').keypress(function(e){
        if(e.which == 13){
            $('#CheckLogin').submit();
            }
        }); 
    $('#Password').keypress(function(e){
        if(e.which == 13){
            $('#CheckLogin').submit();
            }
        });
});

works for me in chrome

http://jsfiddle.net/qEAeN/

might need to double check your js