JQuery parent() selector on submit button selects container not form

Question

On my page, there are two forms. I'd like to select only the one for which the submit button is clicked.

I would think the following should do the trick:

$("#signup,#login").submit(function(){
    $(this).parent("form:first").css('background-color', 'red');
    return false;   
});

But with the "form:first" selector, nothing happens (likely because it is selecting the container div). Without the "form:first" selector, the container div is selected.

http://jsfiddle.net/tenfold/gupGD/

Can anyone help with what's going on here? Many thanks.

$(this).parent().find('form:first') ??

marekful
– marekful

2013-02-05 17:18:24 +00:00
Commented Feb 5, 2013 at 17:18 — marekful
– marekful, Commented Feb 5, 2013 at 17:18

Explosion Pills · Accepted Answer · 2013-02-05 17:20:56Z

2

You could just do

$(this).css('background-color', 'red');

The submission event is bound to the form itself.

Also, you shouldn't use return false, but use the event as a parameter and call event.preventDefault()

answered Feb 5, 2013 at 17:20

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

5 Comments

Sam Dufel Over a year ago

"but use the event as a parameter and call event.preventDefault()" - generally that's true, but in this case stopping the event bubbling won't harm anything; submit events are only meaningful for forms.

Explosion Pills Over a year ago

@SamDufel indeed, but I'd rather teach the correct way to do this

ROY Finley Over a year ago

+1 exactly @ExplosionPills, You always give great and precise answers. Was just trying to make the same point HERE

Explosion Pills Over a year ago

@ROYFinley you'll find it very hard to win an argument against any developer who knows what he's doing even if he's wrong.

ROY Finley Over a year ago

@ExplosionPills Probably, right LOL... as my profile on here says, been doing it 18 years and learn something new every day.

Corneliu · Accepted Answer · 2013-02-05 17:20:36Z

2

You can use .closest() method

$("#signup,#login").submit(function(){
    $(this).closest("form").css('background-color', 'red');
    return false;   
});

answered Feb 5, 2013 at 17:20

Corneliu

2,9521 gold badge21 silver badges23 bronze badges

2 Comments

Explosion Pills Over a year ago

I never knew that closest could select the element itself. That's an extra step, though.

Corneliu Over a year ago

@Explosion Pills You're absolutely right, in this particular example it's an extra step. The ability to test the element itself by .closest method is more useful when using mouse event types. I think your answer is more correct than mine.

Pierrickouw · Accepted Answer · 2013-02-05 17:19:25Z

0

You have to use parents() instead of parent().

Extract from doc here :

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

answered Feb 5, 2013 at 17:19

Pierrickouw

4,7341 gold badge34 silver badges29 bronze badges

1 Comment

Jai Over a year ago

Very nice comment but put it in comment section plz.

Collectives™ on Stack Overflow

JQuery parent() selector on submit button selects container not form

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related