[Jquery]formの内容が変更されたか正しく判別する


フォームが変更されたかどうかをよくchangeイベントなどで判定してしまうコードを見かけるが、それだとフォームの内容を差し戻した際にも変更された扱いになってしまうので下記のようにすると変更されたか判別できる

HTML

<form id=”sample-form”>
<p>
<input type=”text” name=”text1″>
</p>
<p>
<label>
<input type=”checkbox” name=”checkbox1″ value=”1″>
Check
</label>
</p>
<p>
<label><input type=”radio” name=”radio1″ value=”1″ checked>Yes</label>
<label><input type=”radio” name=”radio1″ value=”2″>No</label>
</p>
<button id=”submit-btn” type=”button”>
Submit
</button>
</form>

JAVASCRIPT

$(function() {
	var data = JSON.stringify($('#sample-form').serializeArray());
  $('#submit-btn').on('click', function() {
  	if (data != JSON.stringify($('#sample-form').serializeArray())) {
    	alert('変更あり');
    } else {
    	alert('変更なし');
    }
  });
});

JSFiddleにも上げてます

https://jsfiddle.net/cdz0cr97/

フォームのシリアライズされた内容を画面表示時に取得しておき、ボタンが押されたタイミングでシリアライズされた内容を再度取得し、比較を行っています。

こうすれば比較的少ないコード量で簡易に変更があったかどうかを比較することが可能です(´・ω・`)


この投稿へのコメント

  1. 匿名 said on 2017/04/07 at 7:04 PM

    助かりました

コメントを残す

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL