JavaScriptにて初回起動時と現在のform(画面項目)の値の比較

Question

javascriptについて質問があります。
初回起動時のform(画面項目)の値と現在の値を比較して1つでも変更があった場合にはポップアップを表示するといった処理を実装したいのですが何か良い方法

があれば、ご教授お願い致します。

はじめはその項目のvalueとdefaultValueにて比較できると思いましたが、defaultValueは画面を再描画するタイミングで取得しますが、行いたい処理の途中でアクションが走り必ず再描画されるタイミングがあるためその方法では比較できないことに気づきました。(また項目の入力チェックなのでエラーになった場合にも)

なので再描画されても、初期表示時の値と現在の値を比較する方法はないでしょうか…

ちなみに画面はJSPにて実装しており、項目はtextやradioやoptionなどあります。

Answer 1

様々方法は有ると思いますが、LocalStorage に入れておいて、ロード時に内容を確認するという手段があります。これであればたとえ不意な再描画でもデータを保持できます。ただ、フォーム送信後にデータを消しておかないと比較に失敗する原因になるのでご注意ください。

【フォームの内容をLocalStorage(SessionStorage)にJSONで保存・復旧する - Qiita】
http://qiita.com/nbnb/items/b44810b7ccffcdfa8ac7

【LocalStorageをもっとデータベースライクに使う方法 - Qiita】
http://qiita.com/masamitsu-konya/items/ce7f6469434076448238

Comments

[nandemoiii]

回答ありがとうございました。
まだプログラマーとしてはかけだしなので...LocalStorageよりもう少し簡単な方法などはないでしょうか...?

申し訳ありません。

[kei344]

「 JavaScriptにて」というタイトルだったのでそれでしたいのかな、と思っていたのですが、そうではないのですね。

「初回起動時のform(画面項目)の値」が以前のユーザー入力値
「現在の値」フォームの送信時のユーザー入力値
「行いたい処理の途中でアクションが走り必ず再描画されるタイミング」ステップ式のフォーム

ということでしょうか。
それであれば JavaScript を使わずにフォームの再描画時に <input type="hidden"> を項目の数だけ入れて、JSP側でチェックするというのも手です。

「行いたい処理の途中でアクションが走り必ず再描画されるタイミング」というか全体のフローがもう少し具体的になれば回答もしやすいです。

[kei344]

ちなみにクッキーに格納する方法はお勧めできません。あまりにも容量が小さいため少しのテキストしか保存できません。

【最新ブラウザのクッキーの制限(数,サイズ)を調べてみた - ITコンサルタント成長録】
http://d.hatena.ne.jp/hosikiti/20120720/1342750879

[nandemoiii]

回答ありがとうございます。
具体的にやりたい処理を下記に記載していきますね。

------------------------------------------------------------
画面A、画面Bがあるとします。
画面Aから画面Bに遷移し、画面Bから戻るボタンで画面Aに遷移できる仕様です。

画面Bから戻るボタンで画面Aに遷移する際に、画面Aから遷移し表示したform(画面)の内容と１つでもformの値(テキストボックス・ラジオ・ドロップダウン)の内容が変更してあればポップアップを表示したいです。

はじめはjavascriptにてvalueとdefaultValuを使用して初期表示時の値と現在の値を比較できると思ったのですが、その項目の中にファイルアップロードがあり画像削除ボタン押下した際にはDBに登録されているファイル名とファイルパスをnullで更新する処理になっております。この際に画像削除がエラーなく成功した場合はアクションが走り自画面にフォアードします。アクションが走るということは画面を再読み込みするのでformの内容が上書きされていまし、初期表示のformの内容ではなくなって比較することができなくなってしまいます。(項目の入力チェックにてエラーメッセージを表示する際もアクションが走り画面が再読み込みされます)

なので画面が再読み込みされても、画面Aから画面Bに遷移したformの状態をずっと保持しておく方法はないでしょうかね？

長々とした文章で申し訳ありませんが、わかる範囲でよろしいのでご教授ください。

[kei344]

「画面A」が入力フォーム、「画面B」が確認及び編集フォームという感じでしょうか。
それであれば、「画面B」の描画時に「画面A」の入力内容全てを<input type="hidden">で埋め込み、その値と表示されているフォーム（@画面B）の内容を比較されてはいかがでしょうか。（入力チェックや画像の再描画時にもhiddenの項目を正しく入れる必要がありますが）

[kei344]

[A]
<form method="post" action="to_B">
<input type="text" name="my_text1">
<input type="text" name="my_text2">
</form>
↓POST通信
[B]
<form method="post" action="to_B">
<input type="hidden" name="hidden_my_text1" value="aaaa"><!-- サーバ側で入力 -->
<input type="hidden" name="hidden_my_text2" value="bbbb"><!-- 〃 -->
<input type="text" name="my_text1" value="aaaa"><!-- 〃 -->
<input type="text" name="my_text2" value="bbbb"><!-- 〃 -->
</form>
として、hidden_my_text1とmy_text1のvalueを比較すればよいと思います。

[nandemoiii]

すいません、画面Aが登録されている情報を確認する画面です。参照だけだのですべての項目がリードオンリーです。そして画面Bが編集画面になります。画面Aの内容をもとにデータを取得します。また画面Bは新規モードもあり、その場合は全ての項目は空白の情報で初期表示します。

[nandemoiii]

大変申し訳ありませんが、上記の回答をもとに再度ご教授お願い致します…

[kei344]

> 面Aの内容をもとにデータを取得します。
ではどちらにせよhiddenで埋め込むことは可能ですが、何が問題なのでしょうか。

<input type="hidden" name="hidden_my_text1" value="aaaa"><!-- サーバ側で入力 -->
<input type="hidden" name="hidden_my_text2" value="bbbb"><!-- 〃 -->

[nandemoiii]

プログラマー駆け出しなのでおこがましい質問ですが、hiddenで埋め込んだ値は画面更新時には上書きされず、hidden以外(textやradioやoption)などの項目は上書きされる認識であってますか？

またformの項目すべてをhiddenに一括で保持しておく方法はありますでしょうか？

初歩的な質問ばかりで申し訳ありませんが、ご教授お願い致します。

[kei344]

>hiddenで埋め込んだ値は画面更新時には上書きされず、hidden以外(textやradioやoption)などの項目は上書きされる認識であってますか？
コードの書き方によります。

> hiddenに一括で保持しておく方法はありますでしょうか？
いくつも有るとは思いますが、JavaScriptに慣れておられないならお勧めしません。

Answer 2

ajaxで初期値をJSONで受け取るように最初から作っておいて
適宜比較すればよいのでは？

Answer 3

画面描画後に入力フォーム内の入力項目に何らかの変更をしたこと(テキストボックスに何かを入力した、ラジオボタンを変更した、チェックボックスのON/OFFをした、など)を検知する仕組みとして JavaScriptのform.onchangeイベントがあります。

ただし"何らかの変更"ですので、結果的に変更前と同じ値であっても「変更した」と判定します。

もっと厳密な比較を実装する場合には、やはり画面出力後の値をすべて保管しておき、チェックしたいタイミングですべて比較することになるでしょうか。

お手軽に入力項目の変更を検知するので良ければ、form.onchangeが一番でしょうか。

参考サイト：
Ajax Tower｜フォーム変更時の処理(onChange)

Comments

[nandemoiii]

回答ありがとうございます。
画面出力後の値をすべて保持しておきとありましたが、値をセッションに格納しておこうと思っていました。しかし入力チェックなどでエラーになりエラーメッセージを画面に出力させる仕様なのでそうなるとアクションが走り、画面が再描画した際にセッションの値はリセットされてしまいます。なので何か画面が再描画しても値をそのまま保持しておく方法などはないでしょうか？

拙い文章で申し訳ありませんが、よろしくお願い致します。

Answer 4

簡単なサンプルを作成しました。
こういう事ですかね・・・？

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf8">
    <title>formの比較</title>
</head>
<body>
<form id="form">
    <input type="text" value="あいうえお">
    <select>
    <option value="aaa"></option>
    <option value="bbb"></option>
    <option value="ccc"></option>
    </select>
    <textarea>あいうえお</textarea>
    <p id="checkBtn">フォームを確認</p>
</form><!-- /#form -->

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var $item  = $('#form').find('input,select,textarea'),
    valArr = [],
    checkChange = function() {
        $item.each(function(e){
            if(valArr[e] != $(this).val())
                alert('値が変更されています');
        });
    };

$item.each(function(e){
    valArr[e] = $(this).val();
});

$('#checkBtn').click(checkChange);
</script>
</body>
</html>

Comments

[nandemoiii]

わざわざご丁寧にありがとうございます！
そのサンプルで質問なのですが、valArrとありますがこれは宣言時はvar valArr = []と０の長さの配列を用意するという認識で合っていますか？
またこの場合だとループしませんが配列の要素は取得できるのですか？

最後にこのロジックの場合に、項目の入力チェックであエラーになったりしアクションが走りformが再読み込みされてもformの項目の内容は画面遷移してきたときの初期表示時の値を保持しているのでしょうか？

つたない文章で申し訳ありません

[fuji_fe]

説明が少なく申し訳ございません。
以下、コメントをつけたソースです。

var $item = $('#form').find('input,select,textarea'),//対象のDOMをjQueryオブジェクトに変更
valArr = [],//比較するための空の配列を用意
checkChange = function() {//現在の状態と比較する関数
$item.each(function(e){
if(valArr[e] != $(this).val())
alert('値が変更されています');
});
};

//この処理で初期描画の値を配列に入れています
$item.each(function(e){
valArr[e] = $(this).val();
});

//alert(valArr);で配列の内容確認できます

//ボタンクリックでcheckChangeを実行
$('#checkBtn').click(checkChange);

[fuji_fe]

>最後にこのロジックの場合に、項目の入力チェックであエラーになったりしアクションが走りformが再読み込みされてもformの項目の内容は画面遷移してきたときの初期表示時の値を保持しているのでしょうか？

formの再読み込みをどのように行っているか存じ上げませんが
この処理では項目の内容を変更する処理はしていません。

「ブラウザが更新された時の初期値」

と

「現在の値」

を比較しています。

[nandemoiii]

この配列には初期表示時の値が格納されているとのことでしたが、この配列の中身は今後アクションが走りformを再読み込みした場合でも保持されているのでしょうか？

はじめはセッションに格納しておこうと思いましたが、セッションはformを再読み込みしたら消えてしまうものなのでセッションで保持するのは無理だなと思いました。

[fuji_fe]

この処理が実行された段階で描画されているものが格納されています。
「formを再読み込みした場合でも」
この処理でブラウザを更新する場合は更新した時の初期表示が格納され、
formのみが変更される場合は、ページを一番最初に読み込んだ時の値が残っています。

[fuji_fe]

また、formの更新でDOMを再描画する場合は$itemが使えなくなります。
その場合は関数内で毎度DOMを取得する必要があります。

checkChange = function() {
$('#form').find('input,select,textarea').each(function(e){...

[nandemoiii]

回答ありがとうございます。
具体的にやりたい処理を下記に記載していきますね。

------------------------------------------------------------
画面A、画面Bがあるとします。
画面Aから画面Bに遷移し、画面Bから戻るボタンで画面Aに遷移できる仕様です。

画面Bから戻るボタンで画面Aに遷移する際に、画面Aから遷移し表示したform(画面)の内容と１つでもformの値(テキストボックス・ラジオ・ドロップダウン)の内容が変更してあればポップアップを表示したいです。

はじめはjavascriptにてvalueとdefaultValuを使用して初期表示時の値と現在の値を比較できると思ったのですが、その項目の中にファイルアップロードがあり画像削除ボタン押下した際にはDBに登録されているファイル名とファイルパスをnullで更新する処理になっております。この際に画像削除がエラーなく成功した場合はアクションが走り自画面にフォアードします。アクションが走るということは画面を再読み込みするのでformの内容が上書きされていまし、初期表示のformの内容ではなくなって比較することができなくなってしまいます。(項目の入力チェックにてエラーメッセージを表示する際もアクションが走り画面が再読み込みされます)

なので画面が再読み込みされても、画面Aから画面Bに遷移したformの状態をずっと保持しておく方法はないでしょうかね？

またformの再読み込みはHTML(JSP)を構築しなおしている　で伝わりますでしょうか？
なのでjavascriptももう一度呼ばれます。