on('submit' works when clicking the

Question

I'm using on('submit') to detect when the form was submitted, but it only works when the user clicks on the submit button.

I use a <button> tag so I can put an image inside the button. I know I could use an input with type="submit" and use CSS it with the image, but I'd like to know the alternative jQuery way.
I was thinking doing an or comparison, for example on('submit') OR when user presses enter on any of the input field, but how should I do that?

$('#form').on('submit', function (e) {

    e.preventDefault();

    var email = $('#email').val();

    function validateEmail(email) { 
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    } 

});


<form id="form">
    <input id="email" maxlength="64" name="EmailEDIT" type="text" width="100">
    <button id="submitBtn"><img height="30" src="images/fx_demo_button.png" width="74"></button>
</form>

I am agree with @KevinB I think that you have another problem with your funtion that not execute it. — Wilfredo P, Apr 15 '14 at 21:02
Btw Remember to add `type="submit"` to your button. afaik firefox ignores the click otherwise... :) — Andreas Louv, Apr 15 '14 at 21:02
Open your javascript console, i suspect there's some red text. F12 — Kevin B, Apr 15 '14 at 21:03
@KevinB Red text, haha. Some call it errors.. In Chrome you can press [ctrl/cmd]+[shift]+[C] to open the debugger tools — Andreas Louv, Apr 15 '14 at 21:05
The problem he has is not that an input doesnt submit. It's probaly the expected result of the function, which is never called to excecute. The code is syntax error free, no errors will be thrown — Martijn, Apr 15 '14 at 21:13
Err, I found another function that was handling the enter key on the whole document. Thanks anyway everybody. — Dan P., Apr 15 '14 at 21:15

Martijn · Accepted Answer · 2014-04-15T21:10:40.167

If the user presses enter in one of the field, the form will submit. It will trigger the same event as the button does. If this does not occur, something's up in your code.

You commented that your code doesnt work, but it does: http://jsfiddle.net/B5pZ4/
All I've added was alert(1); the rest is your code from this topic

You define your function in the eventhandler, might be better to seperate that, just in case you want to use that function again (or alter it a bit and use it in two situations).

If you seperate it in your code, it'll make more sense, I also think this is the problem you're having:
http://jsfiddle.net/B5pZ4/1/

You can actually make your code work with just one line. You create the function in your eventhandler (which, in this case, should be considered bad practice!), but you never call it. Either remove the function declaration, or add this under the function:

return validateEmail( email ); // THIS IS BAD PRACTICE AS FIX!

A tip: if you're working in html5, you can use this and the browser will do validating for you:

<input type="email" />

You are describing the problem I am having -- I don't understand why pressing enter on the input doesn't trigger the submit eventhandler.. — Dan P., Apr 15 '14 at 20:59

score -1 · Answer 2 · answered Apr 15 '14 at 20:59

-1

You need to insert an invisible input type submit for this to work.

answered Apr 15 '14 at 20:59

maak.

21
5

Not the -1, but he has a submit, so this can't be the problem. Also, after I tested his code, it worked. The problem isnt the eventhandler, the problem is (after I did some digging) that way he uses the function – Martijn Apr 15 '14 at 21:08
Martijn It might be working because of the particular browser you are using. I think maak's solution would work but it's clunky. – Stephen Apr 15 '14 at 23:25

on('submit' works when clicking the but not when pressing enter on an input field

2 Answers2

on('submit' works when clicking the