javascript - jquery this.attr("action") submits form? - Stack Overflow

admin管理员组

文章数量:1302381

Assume a form with id "serialform" in an html page.

The following JavaScript works as expected.

$( "#serialform" ).submit(function( event ) { 
    var action = $( "#serialform" ).attr("action");
    var serial = $("#serial").val()
     ...
     return event.preventDefault();
});

However, if I replace the first line of the function to use "this":

$( "#serialform" ).submit(function( event ) { 
    var action = this.attr("action");
    var serial = $("#serial").val()
    ...
    return event.preventDefault();
});

Then the form submits instead of simply returning the action attribute. this refers to the form element (according to firebug).

I would have thought that this would be equivalent to $( "#serialform" ). In any event, I want to get the action attribute of the form that is being submitted.

I'm using jQuery 2.0.3.

Assume a form with id "serialform" in an html page.

The following JavaScript works as expected.

$( "#serialform" ).submit(function( event ) { 
    var action = $( "#serialform" ).attr("action");
    var serial = $("#serial").val()
     ...
     return event.preventDefault();
});

However, if I replace the first line of the function to use "this":

$( "#serialform" ).submit(function( event ) { 
    var action = this.attr("action");
    var serial = $("#serial").val()
    ...
    return event.preventDefault();
});

Then the form submits instead of simply returning the action attribute. this refers to the form element (according to firebug).

I would have thought that this would be equivalent to $( "#serialform" ). In any event, I want to get the action attribute of the form that is being submitted.

I'm using jQuery 2.0.3.

• javascript
• jquery

Share Improve this question Follow edited Dec 9, 2013 at 17:09 Jonathan de M. 9,82888 gold badges4949 silver badges7272 bronze badges asked Dec 9, 2013 at 16:55 RickRick 36255 silver badges1616 bronze badges 4

• 1 replace this.attr with $(this).attr – MackieeE Commented Dec 9, 2013 at 16:56
• Try changing this to $(this). – j08691 Commented Dec 9, 2013 at 16:56
• Because you get the error "TypeError: undefined is not a function" or something like that. Learn how to debug JavaScript. And please read the jQuery tutorial (learn.jquery./events/event-basics). It explains what happens inside an event handler and what this refers to. – Felix Kling Commented Dec 9, 2013 at 16:57
• 2 Avoid issues like this by moving event.preventDefault(); to the first line of your event handler. By doing so it would have not submitted the form, and instead, shown an error in your console. – Kevin B Commented Dec 9, 2013 at 16:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

this is a reference to the DOM node, not the wrapped jQuery node. This DOM node doesn't implement the .attr method, so it throws an error.

You need to wrap the DOM node in a jQuery object before you call a jQuery method, like so: $(this).attr('action').

It submits because this.attr raises an error (something like "Object whatever has no method 'attr'), then further code doesn't run and the default behavior is not prevented. Check your console.

Inside a jQuery event handler, this is the DOM element that triggered the event (the form, in this case). It's not a jQuery object, so it doesn't have an attr method.

本文标签： javascriptjquery thisattr(quotactionquot) submits formStack Overflow