How to execute code after html form reset with jquery?

Question

After clicking an html reset button,

<input type="reset" />

I would like to execute some code. How can I do this and ensure that the form was reset prior to doing so?

Answer 1

I don't particularly like the idea of binding the reset event to the reset button instead of the form. A form can be reset by other means and in those cases your event will not trigger.

Instead, bind the function to the reset event but place it within an instantaneous setTimeout. It will ensure the form is actually reset prior to calling the function.

$('form').on('reset', function(e)
{
    setTimeout(function() { /* ... */ });
});

Answer 2

Using a setTimeout as Ben does here is best: https://stackoverflow.com/a/21641295/144665

$("input[type='text']").val('Hello Everybody!');

$("input[type='reset']").closest('form').on('reset', function(event) {

  // executes before the form has been reset
  console.log('before reset: ' + $("input[type='text']").val());

  setTimeout(function() {
    // executes after the form has been reset
    console.log('after reset: ' + $("input[type='text']").val());
  }, 1);

});

You might want to narrow that form selector down to the specific form involved, maybe with an id.

Fiddle Proof: http://jsfiddle.net/iambriansreed/Zh5cd/

Answer 3

Update: use preventDefault instead of return false.

$('input[type="reset"]').click(function(evt) {
    // Prevent the reset button from firing the form's reset event again
    evt.preventDefault();
    $(this).closest('form').get(0).reset();
    // At this point your form's inputs should have their values reset
});

http://jsfiddle.net/EYqrX/1/

Answer 4

The suggestion is that instead of using <input type='Reset'> use <input type = "button"> in this way you do not have to stop the default behaviour of the reset button. You simply have to add the onclick attribute to the button and in the function you could call the form's reset method where ever you wish and control the behaviour as you wish. The following code illustrates that

HTML:

<input type="button" value="Limpiar" onclick="resetForm(this);"/>

---

JavaScript:

function resetForm(element) {
    //Do what you need before reset the form
    element.form.reset(); //Reset manually the form
    //Do what you need after reset the form
}

Answer 5

try

$('your-form').bind('reset', function() {
  alert('hi');
});

Answer 6

Here an example using the onreset event similar to how you normally use the onsubmit event of the form element to catch clicking on a submit button. The onsubmit example is added for clarification.

In your script:

function submitForm(form){
    var xhr = new XMLHttpRequest(),
        data = new FormData(form);

    xhr.open("POST", url, true);
    xhr.onload = function(event) {
        switch (event.target.status){
            case 200:
                onSuccess(event);
                break;
            default:
                onError(event);
        }
    };
    xhr.send(data);
    return false;
}

function resetForm(form){
    var elements = form.elements;
    // set some initial values to those form elements
    return false;
}

In your html:

<form onsubmit="return submitForm(this);" onreset="return resetForm(this);">
    <button type="submit">Save</button>
    <button type="reset">Reset</button>
</form>

Answer 7

Reset the display contents when clicking the reset button.

$('.custom-file-input').on('change', function(){
    const $label = $(this).next('.custom-file-label');
    const fileName = $(this).val().split('\\').pop(); 
    $label.data('default', $label.html());
    $label.addClass('selected').html(fileName);
});

$('form').on('reset', function(){
    $('.custom-file-input').each(function(){
        const $label = $(this).next('.custom-file-label');
        $label.html($label.data('default'));
    });
});

Answer 8

I ended up using a promise to allow me to chain dom changes together. That way I can ensure the form is reset first, before resetting other dom stuff which needs to change based on input in the form, which includes resetting the form too. I don't necessarily expect the form reset to fail, so I don't use the reject function:

const form = document.getElementById("saveForm");
const resetBtn = form.querySelector("button[type=reset]");
resetBtn.addEventListener("click", function overrideReset(e) {
    e.preventDefault();
    return new Promise((resolve, reject) => resolve(form.reset())).then(() => {
        //run code here.
    });
});

Answer 9

would this help

  $("input[type='reset']").on("click", function(){
    alert("the form has been reset");
  });

link to jsfiddle: http://jsfiddle.net/sdkTz/1/

Answer 10

Add a click event to the reset button, and have it look like this:

function(e) {
    setTimeout(function() {
        // your actual code here
    },1);
}