How to reset a form by (this) selector in jquery?

Question

In the function below, reseting form doesn't work!

$('#myform').submit(function (event) {
  event.preventDefault();
  $.post($(this).attr('action'), $(this).serialize(), function(data, status) 
  {
    $(this)[0].reset(); // error : $(...)[0].reset is not a function
  }
}

How to resolve Thank you

`$(this)` creates a jQuery object with a stack size of one, containing the element `this`. `[0]` breaks out the first element of the jQuery object stack as a raw dom element. Given that, do you see why it doesn't make sense that you are doing those two things back to back? — Taplar, May 30 '18 at 16:58
Also reset is a raw dom method, not a jQuery method. So what you are doing in the `...` is possibly important. Provided that the `this` is the form element you should be able to do just `this.reset()`. If that does not work, then you need to verify that the `this` is the form. — Taplar, May 30 '18 at 17:00
I just told you how. Try `this.reset()` and if you get an error, debug your logic and verify that the `this` is the form. You can do that in any number of ways, one being to console log it. Another being to throw in a `debugger;` statement in there and look at it in your browser debugger. — Taplar, May 30 '18 at 17:03
@AmineDahou Please [edit] your question and include any other relevant details there (Not as a comment) — Alon Eitan, May 30 '18 at 17:13
@AmineDahou You can add `var form = this;` right after `event.preventDefault();`, and then inside the `$.post` callback you need to use the reference of the form `form.reset()` (Instead of `$(this)[0].reset();`) — Alon Eitan, May 30 '18 at 17:19
It's working thank you @Alon Eitan , $(form)[0].reset(); also work now — Amine Dahou, May 30 '18 at 17:23
@AmineDahou That's good to know :) BUT - Don't use `$(form)[0].reset();` because you're just wrapping the element with jQuery and then unwrapping it, bad practice performances-wise and unnecessary — Alon Eitan, May 30 '18 at 17:24
@AmineDahou You can post your answer and accept it (You can self-answer and accept your own answers), or accept the current answer posted by NightOwlPrgmr — Alon Eitan, May 30 '18 at 17:26

NightOwlPrgmr · Accepted Answer · 2018-05-30T17:30:21.897

2

How about:

$('#myform').submit(function (event) {
  event.preventDefault();
  $.post($(this).attr('action'), $(this).serialize(), function(data, status) 
  {
    // post callback function - $(this) is no longer 'myForm'
  }
  $(this).trigger('reset'); // trigger form reset after $.post()
}

What you would want to ensure is the form was successfully posted prior to the form reset, so maybe in the $.post() callback you could set a variable and then check that before triggering the reset.

Something like this:

var can_reset = false;
$('#myform').submit(function (event) {
  event.preventDefault();
  $.post($(this).attr('action'), $(this).serialize(), function(data, status) 
  {
    // unsure if your response returns data.success - just an example
    if (data.success == true) {
        can_reset = true;
    }
  }

  if (can_reset) {
      $(this).trigger('reset');
  }
}

edited May 30 '18 at 17:30

answered May 30 '18 at 17:25

NightOwlPrgmr

1,322
3
21
31

This _might_ work (Not sure about `trigger('reset')` though), but there's also the possibility that the ajax post request will fail and you might want to NOT reset the form in that case – Alon Eitan May 30 '18 at 17:27
1

100% working, you are genious @AlonEitan :), Thank you – Amine Dahou May 30 '18 at 17:30
1

@AlonEitan Yep, already thought of that.. thanks! `trigger('reset')` works the same as the HTML reset button, so should be supported fairly well – NightOwlPrgmr May 30 '18 at 17:32
Awesome, glad I could help! – NightOwlPrgmr May 30 '18 at 17:32
1

@NightOwlPrgmr The second solution will probably won't work because `$.post()` is asynchronous, but as long as the first suggestion works then it's good enough for me :) +1 – Alon Eitan May 30 '18 at 17:35

How to reset a form by (this) selector in jquery?

1 Answers1