修改底層form.reset（）值

Question

我正在使用$('form-selector').get(0).reset()將表單值重置為其原始頁面加載狀態。

編輯后，表單將通過$.ajax()提交，我將在服務器上有新的“默認”值。 表單元素仍將存在於dom中，用戶可以再次提交以進行更新。 我想要“默認”（重置值）來反映我們服務器上的內容（忽略任何其他外部更新）。 是否可以更新 form.reset() 的基礎值， 將每個表單元素更改為不刷新頁面？

跨瀏覽器支持會很好，但由於這是一個內部應用程序，谷歌Chrome只是足夠的。

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;
    });
});

UPDATE

確認！ 我沒有提到我正在尋找處理所有表單元素類型的東西。 即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]等

對困惑感到抱歉。

Answer 1

如果直接更改表單元素的屬性，而不是使用.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');                                              

Answer 2

像這樣的東西：

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

正如David Budiac在評論中提到的，這對選擇元素不起作用。 Select元素有一個名為defaultSelected的獨立屬性。

有關defaultValue屬性的更多信息

我意識到這些鏈接可以訪問微軟的網站，但它們似乎適用於所有主流瀏覽器。

Answer 3

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'));
  });
});