Submitting A form With Jquery, button works but not on 'enter' press

Question

I have a bit of jquery that is submitting a email sign up form for me. Everything works fine when the user clicks the button, but when the hit enter it seems the form is trying to submit through the html not through the jquery and you get taken to where the form should post. I have tried using .submit instead of .click but that didnt seem to work

$('#email-signup-button').click(function () {
        var email = $('#email-address').val();

        // Check to see if field is blank
        if (email.length < 1) {
            errorLog += ('Please provide an email address.');
            errorCount++;
        }

        // If field is email address, check w/ regex
        if (email.match(emailRegex) == null) {
            if (errorCount == 0) {
                errorLog += ('Email address is invalid.\nPlease verify.');
                errorCount++;
            }
        }

        if (errorCount > 0) {
            alert(errorLog);
            errorCount = 0;
            errorLog = "";
        }
        else {
            $.post("/Home/AddEmail", { emailAddress: email });

            alert('Thank you for signing up!');
            $('#email-address').val("");
            $('#email-signup').hide();
            $('.lb_overlay').hide();
        }

        return false;
    });
}


        <div id="email-signup">
            <h2>
                Content Phrase
            </h2>
            <div class="email-deals-close-button">
            </div>
            <p>
                More Content</p>
            <form action="/Home/AddEmail" class="clearfix" method="post">
            <p class="sign-up">
                <label class="placeholder" for="email-address">
                    some@email.com</label>
                <input type="text" id="email-address" name="email-address" value="" />
            </p>
            <button id="email-signup-button" type="button" class="green-action-button">
                Submit</button>
            </form>
        </div>

score 4 · Answer 1 · answered Apr 19 '11 at 17:01

4

You should attach to the submit event of the form itself rather than the click of the button.

 $("#formid").submit(//your function here);

answered Apr 19 '11 at 17:01

Vincent Ramdhanie

102,349
23
137
192

65Fbef05 · Answer 2 · 2011-04-19T17:31:44.423

2

You have your button type set to button. If you want to bind to a submit event, you need your button to be an input and its type to be type="submit".

edited Apr 19 '11 at 17:31

answered Apr 19 '11 at 17:06

65Fbef05

4,492
1
22
24

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Is e-mail signup button the submit button (i. e. type="submit) for your form? If not, it should be for this to work. If you don't want it to be, you can set an event on the window capturing enter and direct it to that button's click event:

 $(window).bind('keypress', function(e){
   if ( $( e.originalTarget ).is( ':input' ) && e.keyCode == 13 ) {
     $(#email-signup-button").click();
     e.preventDefault();
   }
 });

(code source)

Also a place to look is to potential name conflict errors that supposedly cause confusing problems:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

(jQuery docs)

Ideally find whatever is causing submit not to work and use that.

edited May 23 '17 at 12:13

Community

1
1

answered Apr 19 '11 at 17:06

justkt

14,610
8
42
62

id="email-signup-button" , yes this is my email sign up button – Lawrence Apr 19 '11 at 17:08
@Lawrence - but is it ``? Doesn't appear to be, and that would mean `.submit()` wouldn't work as expected. If you don't want to use a submit button then the window enter fix I provided would work. – justkt Apr 19 '11 at 17:09
is the input they are entering the email in at – Lawrence Apr 19 '11 at 17:11
@Lawrence - the button is the concern I have. You have it set as a regular button, not a submit button. – justkt Apr 19 '11 at 17:11
Well I thought i didnt need to set it as a i thought i could just use a button tage and call that button in the jquery – Lawrence Apr 19 '11 at 17:15
@Lawrence - here's the info on submit from the jQuery documentation itself: "The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to
elements. Forms can be submitted either by clicking an explicit ``, ``, or `
– justkt Apr 19 '11 at 17:17
I apologize for not following but I do now, I think I got it . Thank you for the help, sorry for the dumb questions. Not a seasoned jquery master like you all – Lawrence Apr 19 '11 at 17:19
@Lawrence - it's not dumb; glad you are following now. – justkt Apr 19 '11 at 17:21

score 0 · Answer 4 · answered Apr 19 '11 at 17:01

0

Prevent the submit from happening:

$('#your_form_id').submit(function() {
  return false;
});

answered Apr 19 '11 at 17:01

Blender

289,723
53
439
496

1

the problem is as mentioned by Vincent. he is adding the handle to the button click instead to form submit. – sv_in Apr 19 '11 at 17:05
Ah, okay. That makes more sense. – Blender Apr 19 '11 at 20:11

score 0 · Answer 5 · answered Apr 19 '11 at 17:02

0

You can bind to the form's submit event instead.

$('#myForm').submit(function(){ /* do stuff */ });

answered Apr 19 '11 at 17:02

cwharris

17,835
4
44
64

score 0 · Answer 6 · answered Apr 19 '11 at 17:02

0

Do this:

$("form").submit(function(e){
e.preventDefault();return false;
});

answered Apr 19 '11 at 17:02

Naveed Ahmad

3,176
1
15
18

Submitting A form With Jquery, button works but not on 'enter' press

6 Answers6