jQuery form submitting script does not work

Question

I try to prevent a form submitting, with the following script, but it always does. I have even tried preventDefault() on document load, but it does not work.

$("form").submit(function() {
      if ($("input").eq(3).val() == $("input").eq(4).val()) {
            $("span").text("Validated...").show();
        return true;
      }

      $("span").text("Passwords do not match!").show().fadeOut(1000);
      return false;
});

`return true` will cause the form to submit. Your code looks fine. — Kevin B, Sep 05 '12 at 20:50
@KevinB I know right? But it does not work! Maybe something's wrong with my server/browser(Chrome). — MayTheSchwartzBeWithYou, Sep 05 '12 at 21:01
For debugging, return false in both cases and alert or console.log at each to know which one was reached. More than likely your if statement conditional isn't selecting the correct input elements. — Kevin B, Sep 05 '12 at 21:08

score 1 · Answer 1 · answered Sep 05 '12 at 20:47

1

$("form").submit(function(e) {
      if ($("input").eq(3).val() == $("input").eq(4).val()) {
            $("span").text("Validated...").show();
      }
      else{
        $("span").text("Passwords do not match!").show().fadeOut(1000);
        e.preventDefault();
      }
});

You need to use preventDefault() to cancel the action. Note the parameter e that I added to the anonymous function call.

answered Sep 05 '12 at 20:47

Shmiddty

13,847
1
35
52

It still submits. Weird things... Also can you elaborate what the 'e' stands for? – MayTheSchwartzBeWithYou Sep 05 '12 at 20:50
return `false` from a jQuery event handler already does `preventDefault()` for you. This doesn't change the submit behavior from OP's code. – jfriend00 Sep 05 '12 at 20:51
1

@Peter Your validation logic must be evaluating to true then, so it's never getting to the `preventDefault()` line. `e` is just shorthand for `event`. You can name it whatever you want, but it is the event object that contains a number of properties related to the event. – Shmiddty Sep 05 '12 at 20:53

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

My suggestion, or the way I normally go about this is like this:

$("form").submit(function(e) {
    e.preventDefault(); // form never fires unless I want it to

    if( condition == true ) {
        $(this).submit();
    } else {
        //Don't submit
    }
}

Here is a great explanation of why preventDefault() > return false

edited May 23 '17 at 12:20

Community

1
1

answered Sep 05 '12 at 20:52

Phil

10,948
17
69
101

score 0 · Accepted Answer · answered Sep 05 '12 at 21:06

In order for this to close I think I have found something, but it's absurd at best. My functions work when they are in a $(document).ready. Why? I would be glad to listen to your advice.

$(document).ready(function(){

$("form").submit(function() {
      if ($("input").eq(3).val() == $("input").eq(4).val()) {
            $("span").text("Validated...").show();
        return true;
      }

      $("span").text("Passwords do not match!").show().fadeOut(1000);
      return false;
});

 });

jQuery form submitting script does not work

3 Answers3