Hidden submit button wont submit in chrome when enter is pressed

Question

I have a problem with a hidden submit button. I have an input field 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.

Answer 1

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.

Answer 2

如果您使用按键处理程序，则不需要隐藏的提交按钮，因此只需将其删除即可。

Answer 3

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();
            }
        });
});

Answer 4

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;
}

Answer 5

works for me in chrome

http://jsfiddle.net/qEAeN/

might need to double check your js