javascript - jqueryでhtmlフォームをリセットした後にコードを実行するには?

Question

HTMLリセットボタンをクリックした後、

<input type="reset" />

いくつかのコードを実行したいと思います。これを行う前にフォームがリセットされたことを確認するにはどうすればよいですか?

Answer 1

ベンがここで行っているように setTimeout を使用するのが最善です: 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);

});

おそらくIDを使用して、そのフォームセレクターを関連する特定のフォームに絞り込むことができます。

フィドルプルーフ: http://jsfiddle.net/iambriansreed/Zh5cd/

Answer 2

<input type='Reset'>この方法でuseを使用する代わりに、ボタン<input type = "button">のデフォルトの動作を停止する必要がないことをお勧めします。resetボタンに属性を追加するだけonclickで、関数内でフォームのリセット メソッドを任意の場所で呼び出すことができ、必要に応じて動作を制御できます。次のコードは、

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 3

更新:preventDefaultの代わりに使用し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

試す

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

Answer 5

これは役に立ちますか

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

jsfiddleへのリンク：http：//jsfiddle.net/sdkTz/1/

Answer 6

リセットボタンにイベントを追加し、click次のようにします。

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