javascript - jqueryタブのフォームフィールドを更新する

Question

動的に生成され、jQuery タブにあるフォーム フィールドをリセットする方法は? ユーザーがあるタブから別のタブに移動すると、フォーム テキスト フィールドを持つ最初のタブがリセットされ、タブに再度アクセスすると、フィールドがリセットされます。

機能を使用しました：

resetForm(formId){
    $(’#’+formId)[0].reset();
}

問題は、タブに動的に作成される (追加時に生成される) フォーム フィールドが含まれていることです。

このような場合、フォーム フィールドのクリアを削除するにはどうすればよいでしょうか。

Answer 1

あなたが持っていると想像してください：

<div id="container>
    <form ...>
    ... dynamically generated forms etc
    <form ...>
</div>

次に、このコンテナ内のすべてのフォームを次のように選択できます。

$('#container form').each(function(){
        $(this)[0].reset();
    });

これにより、$（this）が現在のフォームである場合に、選択されたすべてのフォームに対して特定の関数が起動されます。

Answer 2

すべての入力に共通のクラスを定義し、onfocusやblurなどのイベントに基づいてそれらの値をリセットできます。例えば

document.getElementsByClassName("myclass").onfocus = function() {

}

Answer 3

私があなたを正しく理解しているなら、あなたはフォームで動的に作成されたフィールドをクリアしたいですか？

では、これはあなたが必要とするものですか？

resetForm(formId) { 
    $("input, textarea, select", $("#" + formId)).val(''); // Or .text('');
}

Answer 4

フォームに動的に追加するフィールドにクラスを追加します。例: 「dynamically_added」。したがって、別のタブに移動すると、次のようになります。

    var form_values;
    $( ".selector" ).tabs({
        select: function(event, ui) { 
            if (ui.index != 0) { //if I didn't clicked on the first tab
                save_form_fields();
                $( ".dynamically_added" ).remove();
                $("#" + formId).reset();
            }
            else {
                add_dynamic_fields();
                restore_form_values();
            }
        }
    });

コードをテストしませんでしたが、役に立てば幸いです。そうでない場合は、お知らせください。別のことを考えます。

Answer 5

これにより、すべてのフォーム値がクリアされます。

$('input:text, input:password, input:file, select, teaxarea').val('');