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.

score 8 · Answer 1 · answered May 30 '12 at 19:13

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.

score 4 · Accepted Answer · answered Apr 13 '11 at 08:06

4

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

answered Apr 13 '11 at 08:06

msjolund

121
1
2

Thanks a lot, removed the button and added the keypress handler and it works perfectly now. – Kevin Vandenborne Apr 13 '11 at 08:39

score 0 · Answer 3 · edited Sep 27 '12 at 14:52

0

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

edited Sep 27 '12 at 14:52

Chandra Sekhar Walajapet

2,534
17
24

answered Aug 14 '12 at 07:51

Davor Mlinaric

1,989
1
19
26

score 0 · Answer 4 · answered Apr 13 '11 at 08:20

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

score -1 · Answer 5 · answered Apr 13 '11 at 08:07

-1

works for me in chrome

http://jsfiddle.net/qEAeN/

might need to double check your js

answered Apr 13 '11 at 08:07

Bruce Aldridge

2,907
3
23
30

1

For latecomers: This is because there is a single text input, which is part of the spec. (See http://stackoverflow.com/questions/1370021.) [This example with 2 inputs](http://jsfiddle.net/qEAeN/98/) doesn't work. – cmbuckley Mar 28 '13 at 16:16

Hidden submit button wont submit in chrome when enter is pressed

5 Answers5