0

サーバー側とクライアント側の両方の検証を行うフォームがあります。これは編集フォームであるため、元のユーザー値は最初に事前入力されています。

e.g. The original pre-populated values are:
username = yeo
surname = yang
phonenumber = 11-12345

ここで、ユーザーは以下を編集して送信します。

e.g. The edited submitted values are:
username = yeoNew
surname = yangNew
phonenumber = 12-1111

これはサーバー側に送信され、12 で始まる電話番号は許可されていないため、サーバー側の検証に失敗します。

とにかく、フォームは次のようにユーザーに表示されます

e.g. The redisplayed form values are:
username = yeoNew
surname = yangNew
phonenumber = 12-1111

これは、私のフォームでは、ユーザーが送信された値を記憶できるためです。

この段階で、ユーザーがクライアント側の JavaScript を使用してフォームの値を元の値にリセットできるようにしたいと考えています。これはリセット機能のようなものです。

e.g. The reset button will restore the form values to:
username = yeo
surname = yang
phonenumber = 11-12345

このリセット機能の理由は、ユーザーが電話番号を元の値から再度編集できるようにするためです。

私の質問は次のとおりです。HTML 内の元の値を追跡して、javascript で復元できるようにする良い方法は何ですか?

この値を格納するフォーム要素内に orig='' という新しい属性を考えています。それは良い考えですか？他のアプローチはありますか？

ありがとう

4

1 に答える 1

1

HTML5 ローカル ストレージを使用します。http://www.w3schools.com/html/html5_webstorage.aspを参照してください。

jquery を使用すると、次のようになります。

   <script type="text/javascript">
      function load() {
        if (localStorage["username"]) {
            $('#username').val(localStorage["username"]);
        }
        if (localStorage["surname"]) {
            $('#surname').val(localStorage["surname"]);
        }
        if (localStorage["phone"]) {
            $('#phone').val(localStorage["phone"]);
        }
      }

      function save() {
        localStorage["username"] =  $('#username ').val();
        localStorage["surname"] =  $('#surname').val();
        localStorage["phone"] =  $('#phone').val();
      }
   </script>
于 2013-03-25T02:44:31.007 に答える