jQueryを使用して入力の実際の値属性を設定する

StackOverflow https://stackoverflow.com/questions/1634676

  •  06-07-2019
  •  | 
  •  

質問

入力の実際の値属性をリセットしようとしています。リセットすると、フォームがロードされたときの元の値ではなく、その値にリセットされます。問題は、これらの変更が有効にならないように見えることです。私は両方を試しました：

$(this).attr('value', $(this).val());

同様.... 

$(this).val($(this).val());

これらのどちらも、入力の value =＆quot;＆quot; 属性を実際には変更しません。これは、フォームがリセットされるときに使用されます。問題は、誰かが（AJAXを介して）フォームを保存し、再度編集してリセットを押すと（今回の保存なしで）、最後に保存された値ではなく、ページがロードされた元の値に戻ることです。これは私が取得しようとしているものです。私はこれを回避する方法（ローカル変数または何かに保存する）があることを知っていますが、jQueryソリューションがはるかに良いでしょう。アイデアはありますか？

役に立ちましたか？

解決

このようなことをしているとき：

$(this).val($(this).val());

実際には次のように変換されます：

var temp = $(this).val());
$(this).val(temp);

本質的には、同じ値を戻すだけです。

あなたがしたいことは、ドキュメントの読み込みまたはAJAXリクエストで、値を変数に保存し、フォームがリセットされたときに値を取得することです。

他のヒント

これはクールなトリックのように聞こえますが、別のトリックがあります。

要素全体を置き換えることでDOMを変更できるので、代わりに：

$('#my_input').val("new_value_here");

次を使用できます：

$('#my_input').replaceWith(' < input type="text" value="new_value_here" />');

これに対する解決策を思いつきました...

フォームを保存するとき（AJAX経由、成功コールバックで）：

// Set 'savedValue' attr on elements (for when reset, will reset to last saved values)
$('#myForm input').each(function() {
    $(this).attr('savedValue', $(this).val());
});

フォームをリセットする必要がある場合：

// Reset form
if($('#myForm input:first').attr('savedValue')!=undefined) {
    // Have saved values, reset to last saved values
    $('#myForm input').each(function() {
        $(this).val($(this).attr('savedValue'));
    });
}
else {
    // No saved values, reset form
    $('#myForm')[0].reset();    
}

これはテキストボックスに最適です。少し調整するだけで、どの入力タイプでも動作するようになります。たくさんの入力があるので、可能な限りそれらを手動で保存/リセットすることは避けたいと思いました。これは良いプラグインになります...多分明日

thing.value =＆quot; foo＆quot ;; を使用するだけです。事がjQueryオブジェクトであるだけでなく、通常のDOMオブジェクトでもある場合に動作するかどうかを確認します。 attr（ 'value'、$（this）.val（））を使用すると、期待どおりに動作しません

ローカル変数よりも優れていますが、jQuery Dataメソッドを使用して、リセットする要素とともにリセット値を保存できます。

保存する場合：

$(this).data("ResetValue", $(this).val());

リセット時：

$(this).val($(this).data("ResetValue"));

セレクターを適切に変更し、おそらくRyanが述べたように未定義のチェックを追加します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top