web-dev-qa-db-ja.com

JavaScript：非表示フィールドの真のフォームリセット

残念ながらform.reset（）関数はフォームの隠された入力をリセットしません。 FF3とChromiumでチェックイン。

隠しフィールドのリセット方法も知っていますか？

javascriptformsreset
23
Bogdan Gusiev

これを行う最も簡単な方法は、非表示フィールドではなくdisplay：noneテキストフィールドを使用することです。この場合、デフォルトのリセットプロセスが定期的に行われます。

27
Bogdan Gusiev

これは正しいです 標準に従って 、残念ながら。悪いスペックはIMOをいぼます。 IEそれにもかかわらず、非表示フィールドにリセット可能なdefaultValueを提供します。参照 このディスカッション ：HTML5では（alas）は変更されません。

（幸いなことに、フォームをリセットする必要はほとんどありません。UI機能としては、一般的には不快に感じられます。）

value属性の元の値はまったく取得できないため、別の属性に複製してフェッチする必要があります。例えば。：

<form id="f">

<input type="hidden" name="foo" value="bar" class="value=bar"/>

function resetForm() {
    var f= document.getElementById('f');
    f.reset();
    f.elements.foo.value= Element_getClassValue(f.elements.foo, 'value');
}

function Element_getClassValue(el, classname) {
    var prefix= classname+'=';
    var classes= el.className.split(/\s+/);
    for (var i= classes.length; i-->0;)
        if (classes[i].substring(0, prefix.length)===prefix)
            return classes[i].substring(prefix.length);
    return '';
}

その値を密輸する別の方法には、HTML5 data、titleなどの別のスペア属性、直後の<!-- comment -->から値を読み取る、明示的な追加のJS情報、またはデフォルト値を保持するための追加の非表示フィールド。

どのようなアプローチでも、HTMLを乱雑にする必要があります。一部のブラウザは、コードが実行されるまでに、フィールドの値を（リロードまたは戻るボタンを押して）記憶された値ですでに上書きしているため、ドキュメントの準備ができたときにスクリプトで作成することはできません。

14
bobince

誰かがここに来てそれを探している場合の別の答え。ページが読み込まれた後にフォームをシリアル化し、それらの値を使用して後で非表示フィールドをリセットします。

var serializedForm = $('#myForm').serialize();

次に、フォームをリセットします。

function fullReset(){

    $('#myForm').reset(); // resets everything except hidden fields


    var formFields = decodeURIComponent(serializedForm).split('&'); //split up the serialized form into variable pairs

    //put it into an associative array
    var splitFields = new Array();
    for(i in formFields){
        vals= formFields[i].split('=');
        splitFields[vals[0]] = vals[1];
    }
    $('#myForm').find('input[type=hidden]').each(function(){    
        this.value = splitFields[this.name];
    });

}
6
ForOhFor

ドキュメントが読み込まれたときにデフォルト値を設定し、リセットをトラップして非表示の子犬を元の値にリセットする方が簡単だと思いました。例えば、

//fix form reset (hidden fields don't get reset - this will fix that pain in the arse issue)
$( document ).ready(function() {
  $("#myForm").find("input:hidden").each(function() {
      $(this).data("myDefaultValue", $(this).val());
  });

  $("#myForm").off("reset.myarse");
  $("#myForm").on("reset.myarse", function() {
     var myDefaultValue = $(this).data("myDefaultValue");
     if (myDefaultValue != null) {
       $(this).val(myDefaultValue);
     }
  });
}

これが誰かを助けることを願っています:)

4
Anthony Estelita

あなたはjQueryを使うことができます-これは隠しフィールドを空にします：

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).val('');
});

ヒント：csrfトークンフィールドなど、空にしてはいけないものをリセットしていないことを確認してください。必要に応じて要素の仕様を絞り込むことができます。

フィールドをデフォルト値にリセットする場合は、使用できます（テストされていません）。

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).each(function() {
    var $t = $(this);
    $t.val($t.data('defaultvalue'));
  });
});

data-defaultvalue="Something"プロパティにデフォルト値を保存します。

2
Alan
$('#form :reset').on('click',function(e)({
    e.preventDefault();
    e.stopImmediatePropagation();
    $("#form input:hidden,#form :text,#form textarea").val('');
});

Select、checkbox、radioの場合は、デフォルト値を知っている（保持する）と、そのイベントハンドラーでデフォルト値に設定する方がよいでしょう。

1
aidonsnous

これは行います：

$("#form input:hidden").val('').trigger('change');
0
user4877292

それを行う方法は、非表示フィールドの変更イベントにイベントリスナーを配置することです。そのリスナー関数では、初期値をDOM要素ストレージ（ mootools 、 jquery ）に保存し、フォームのリセットイベントをリッスンして、保存されている初期値を復元できます非表示のフォームフィールドストレージ。

0
ChrisR

以下の行を使用して非表示の入力フィールド値をリセットできます。frmFormの代わりにフォームIDを変更するだけです。

$("#frmForm input:hidden").val(' ');
0
Rutvik kakadiya

ボタンを作成し、フィールドをクリアするonClickイベントにJavaScriptを追加します。

とはいえ、なぜこれらのフィールドをリセットする必要があるのか​​興味があります。通常、これらには内部データが含まれています。コードでそれらをクリアすると、フォームの投稿が失敗します（たとえば、ユーザーが新しいデータを入力してフォームを送信しようとした後など）。

[編集]あなたの質問を誤解しました。誰かが隠しフィールドの値を改ざんするのではないかと心配している場合は、それらをリセットする方法はありません。たとえば、フォームでreset()を呼び出すことはできますが、フォームのフィールドで呼び出すことはできません。

JavaScriptファイルに値を保存し、それを使用して値をリセットすることもできますが、ユーザーが非表示フィールドを改ざんできる場合は、JavaScriptも改ざんできます。

したがって、セキュリティの観点から、非表示フィールドをリセットする必要がある場合は、最初にそれらを回避し、サーバーのセッションに情報を保存します。

0
Aaron Digulla