jQuery submit() function not causing <form> to submit

I have a form like this...

<form action="/tags/3" class="edit_tag" id="edit_tag_3" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="_method" type="hidden" value="put" />
  </div> 
  <input class="tag_form_field" id="tag_name" maxlength="255" name="tag[name]" size="42" type="text" value="" /> 
</form>

And I'm trying to submit it like this...

$('.tag_form_field').change(function() {
  $(event.target).closest('form').submit();
});

When I change the input, the form does not submit. Nothing happens -- no error.

I know the selector and the onChange() handler are both working. I tested them by replacing submit() with the jQuery css() function and it worked fine.

I tested it in Safari and Chrome on OS X with the same result.

Any ideas?

Thanks.

I tried these as well with the same result...

$('.tag_form_field').change(f开发者_StackOverflow中文版unction() {
  $(this).closest('form').submit();
});

$('.tag_form_field').change(function(e) {
  $(e.target).closest('form').submit();
});

$('.tag_form_field').change(function() {
  $(this).closest('form').submit();
});

$('.tag_form_field').change(function() {
  $(this).closest('form')[0].submit();
});

Try $(this).closest('form.edit_tag')[0].submit();

Otherwise it just triggers the submit event on the form.

I wonder. Can you try phrasing it this way:

$('.tag_form_field').change(function(e){
    $(e.target).closest('form.edit_tag').submit();
});

jQuery should take care of properly encapsulating the event object for you, regardless of browser.

Also, I'm inclined to think that you possibly can't have a form inside a form, so there shouldn't be a need to specifically select for a "form with class edit_tag", shouldn't there? Probably just $(this).closest('form') should suffice?