CODEWITHSUNDEEP
jqueryformssubmit
Lawrence
Lawrence

Reputation: 845

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

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">
                    [email protected]</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>

Upvotes: 1

Views: 1369

Answers (6)

65Fbef05
65Fbef05

Reputation: 4522

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".

Upvotes: 2

justkt
justkt

Reputation: 14776

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.

Upvotes: 1

Naveed Ahmad
Naveed Ahmad

Reputation: 3175

Do this:

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

Upvotes: 0

cwharris
cwharris

Reputation: 18125

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

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

Upvotes: 0

Blender
Blender

Reputation: 298562

Prevent the submit from happening:

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

Upvotes: 0

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103155

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

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

Upvotes: 4

Related Questions