jQuery .click() doesn't trigger function in IE

Question

I have an html form which runs a javascript function before submitting. The html of the form tag is:

<form onsubmit="return sub();" method="post" action="useclick.php">

The html of the submit button is:

<input type="submit" value="Submit" id="submit"/>

That all works fine, but I want the user to be able to press enter anywhere and for it to submit the form so I've got this bit of code:

$(document).keypress(function(e) {
    if(e.which == 13) {
        $(this).blur();
        $('#submit').focus().click();
    }
});

This does exactly what I want in all browser except IE. In IE, it does click the submit button, and send off the form but it doesn't run the sub() function first. It's the same in IE 8 and 10, which are the only versions I have access to at the moment.

For completeness, the sub() function looks like:

function sub(){
    document.getElementsByName('coords')[0].value = JSON.stringify(coordsArray);
    return true;
}

I'm fairly new to javascript and very new to jQuery so any help would be very useful.

Never head of coords element. only as an attribute of map area. — haim770
– haim770, Commented Jul 17, 2013 at 17:05
coords is the name of an input: <input type="hidden" name="coords" /> — Tim Barclay
– Tim Barclay, Commented Jul 17, 2013 at 17:08
oops, i misread the function name, i thought it's getElementsByTagName. sorry. — haim770
– haim770, Commented Jul 17, 2013 at 17:10

Gabriel Kohen · Accepted Answer · 2013-07-23 15:27:08Z

3

Have you tried:

$(document).keypress(function(e) {
       if(e.which == 13) {
        $(this).blur();
        $('#your_form_id').submit();
        return false;
       }
    });

In a sense you are programmatically submitting and preventing the subsequent chain of events.

Update: Changed it and made a a JSFiddle to demo. Let me know if it works for you.

<h2>Form</h2>
<form action="" method="post" id="myform">
   First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
   Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>

   <p><input id="submit" type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>
<script>
            $.fn.serializeObject = function()
            {
                var o = {};
                var a = this.serializeArray();
                $.each(a, function() {
                    if (o[this.name] !== undefined) {
                        if (!o[this.name].push) {
                            o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                    } else {
                        o[this.name] = this.value || '';
                    }
                });
                return o;
            };
            $(' input').keypress(function(e) {
                if(e.which == 13) {
                    console.log('Enter pressed');
                    $('#submit').blur();
                    $('#myform').submit();
                    e.preventDefault();
                    return false;
                }
            });
            $(function() {
                $('form').submit(function() {
                    console.log('submitted');
                    $('#result').text(JSON.stringify($('form').serializeObject()));
                    return false;
                });
            });
</script>

Update #2 Hi, you need to make sure that you bind to the elements you want to listen to. In this case all the elements in the your document. In general to listen to key events those elements should be focusable. In this new JSFiddle the enter press event is attached as mentioned. Make sure that you focus (read: click) anywhere in the document first. Let me know how it goes.

Update #3 Added this JSFiddle to make sure that the body is focused and has tabIndex. Please accept answer if this works for you.

edited Jul 23, 2013 at 15:27

answered Jul 17, 2013 at 17:18

Gabriel Kohen

4,3264 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tim Barclay Over a year ago

I'm not sure why but that doesn't seem to do anything. I've taken out the .click() line from the example in my post and replaced it with $('#captchaform').submit(); and return false; but nothing happens at all when I press enter now.

Tim Barclay Over a year ago

Thanks for your really thorough update, and it looks like the right answer, but for some reason mine still isn't working. Using $('form').submit(); or $('#myform').submit() just isn't causing anything to happen at all.

Gabriel Kohen Over a year ago

Tim, do you want to set up a mockup JSFiddle so you can have a proof of concept on how it can be done?

Tim Barclay Over a year ago

Ok, here's a stripped down version of my code in JSFiddle. I want to be able to press enter when the focus is anywhere in the document but that isn't working. Any ideas why? I've also got my original .click() line in there commented out, and that works fine when you uncomment it.

Tim Barclay Over a year ago

Hi Gabriel. Your new JSFiddle doesn't seem to work for me either. Does it work for you? I've tried in Chrome and Firefox but pressing enter still doesn't submit the form.

|

Andi Erni · Accepted Answer · 2015-11-20 11:35:35Z

0

IE is strict on the script type. So ensure to use type="text/javascript".

For example:

<script type="text/javascript" src="script.js"></script>

answered Nov 20, 2015 at 11:35

Andi Erni

5637 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery .click() doesn't trigger function in IE

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related