4

設定：

フォームと「送信」ボタンがあります。理想的には、ユーザーはフォームに記入し、[送信] をクリックしてからタブを離れる必要があります。彼が変更を保存せずにタブを離れようとした場合、3 つのオプションで彼に警告する必要があります。

  1. 保存
  2. 破棄: フォーム データの変更を破棄し、データが変更されていないかのようにタブを離れます。ユーザーが同じタブに戻ると、「変更されていない」データが表示されます。
  3. キャンセル: ダイアログ ボックスを閉じるだけで、ユーザーは同じタブにとどまります。ユーザーは、データをさらに変更したり、[保存] をクリックしたりできます。

問題：

保存とキャンセルの実装は簡単です。問題は「捨てる」です。ユーザーが [破棄] をクリックすると、フォーム データは変更前の状態に復元されます。

これを行う方法はありますか？問題を適切に説明していない場合は、お知らせください。

4

4 に答える 4

10

.data()フォームの初期状態をjQuery関数に保存できます。多分次のようなことをします

$(function(){
    $('form').find(':input').each(function(i, elem) {
         var input = $(elem);
         input.data('initialState', input.val());
    });
});

次に、破棄を押すと、次のようなメソッドを呼び出すことができます。

function restore() {
    $('form').find(':input').each(function(i, elem) {
         var input = $(elem);
         input.val(input.data('initialState'));
    });
}

注：これは、ユーザーがページを離れることなく、フォームをページ上のデータに復元する場合に役立ちます。データを保存したくない場合は、データを保存しないでください...。

于 2012-05-17T17:19:47.573 に答える
2

フォームの値がvalue=""を使用して入力されている限り、フォームをリセットします。

<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">
于 2012-05-17T17:20:01.517 に答える
1

var イニシャル = [];

// Call this function to store all initialvalues
function gettter() {
  $('input,select', 'form').each(function() {
      initials.push({
         type: $(this).attr('type'),
         name: $(this).attr('name'),
         value: $(this).val()
      });
  });
}

// Call this function to restore all values
function setter() {
   initials.each(function(index, record) {
     $('input[type="'+ record.type+'"][name="'+ record.name +'"]', 'form').val(record.val);
   });
}

しかし、以前の値なしでフォームをリセットしたい場合。

$('form').reset();
于 2012-05-17T17:28:32.667 に答える
0

おそらく、ユーザーがページを離れるのをチェックするためにできる最善のことは、 useonbeforeunloadです。ただし、この確認ボックスはカスタマイズできません。この質問とこの記事とこの記事を見てください。ただし、基本は次のとおりです。

var needToConfirm = true;

  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      return "this is required but doesn't actually show";
  }

フォームのリセットはボタンで簡単に実行できます

<input type="reset">
于 2012-05-17T17:34:18.910 に答える