7

$('form-selector').get(0).reset()フォームの値を元のページの読み込み状態にリセットするために使用しています。

編集後、フォームは経由$.ajax()で送信され、サーバーに新しい「デフォルト」値が追加されます。form要素はまだdomに存在し、ユーザーは再度送信して更新できます。「デフォルト」（リセット値）にサーバーの内容を反映させたい（他の外部更新を無視する）。ページを更新せずに各フォーム要素を変更する基になる値を更新することは可能ですか？ form.reset()

クロスブラウザのサポートがあればいいのですが、これは内部アプリなので、GoogleChromeだけで十分です。

HTML

<form>
    <input type="text" value="foo" name="bar" />
    <input type="submit" value="Submit" />
    <Input type="reset" value="Reset" />
</form>

JAVASCRIPT

$(function(){
    $('form').submit(function() {
        // Omitting code that sends form values to the server

        // TODO: update underlying form.reset()
        // values to what's currently in each
        // form element.

        return false;
    });
});

アップデート

ああ！私はすべてのフォーム要素タイプを処理するために何かを探しているとは言いませんでした。すなわちinput[type=text], input[type=radio], input[type=checkbox], select, textarea。

HTML5フォーム要素も処理できるとしたら特に素晴らしいでしょう...つまりinput[type=date], input[type=number], input[email], input[url], input[type=range], input[type=color]、など。

混乱させて申し訳ありません。

4

3 に答える 3

11

メソッドを使用するのではなく、フォーム要素の属性を直接変更すると.val()、新しい値がフォームのリセットに反映されます。テキストフィールドは、ラジオボタンやチェックボックスなどとは異なる方法で処理する必要があります。

    $('input').attr('value', function() { return this.value });
    $('textarea').prop('innerHTML', function() { return this.value });                                              
    $(':checked').attr('checked', 'checked');                                              
    $(':selected').attr('selected', 'selected');
    $(':not(:checked)').removeAttr('checked');
    $(':not(:selected)').removeAttr('selected');
于 2012-12-06T23:05:08.160 に答える
4

このようなもの：

$("#foo").prop("defaultValue", "bar");

David Budiacがコメントで述べたように、これは一部の要素では機能しません。Select要素には、defaultSelectedという名前の個別のプロパティがあります。

defaultValueプロパティの詳細

これらのリンクはMicrosoftのサイトにアクセスしますが、ほとんどすべての主流のブラウザで機能しているようです。

于 2012-12-06T23:09:57.853 に答える
2

Javascriptはリセット値が何であるかを認識していないため、ページの読み込み時にそれらを定義するか、リセット値を使用して非表示フィールドを作成する必要があります。次に、resetを呼び出すときに、それらを設定します。

テキストボックスのように、フォームにある各フィールドに非表示のフィールドがあるとします（ドロップダウンやラジオ/選択に対して同様のフィールドを実行できます）

2つのテキストフィールド（txtfield1とtxtfield2）がある場合は、それらの非表示フィールド（それぞれ、txtfield1-hdnとtxtfield2-hdnと呼ばれます）もあります。

$('form-selector').get(0).reset(function() {
  $('form-selector').find('input').each(function(){
    $(this).val($($(this).attr('id') + '-hdn').val());
  });
});

テキストフィールドhtmlにデフォルト値がある場合は、次のようにすることができます。

<input id="Text1" type="text" value="myValue" />

$('form-selector').get(0).reset(function() {
  $('form-selector').find('input').each(function(){
    $(this).val($(this).attr('value'));
  });
});
于 2012-12-06T23:05:52.543 に答える