修改底层 form.reset() 值

Question

我正在使用 $('form-selector').get(0).reset() 将表单值重置为其原始页面加载状态。

编辑后，表单将通过$.ajax() 提交，我将在我们的服务器上拥有新的“默认”值。表单元素仍会存在于 dom 中，用户可以再次提交更新。我想要“默认”（重置值）来反映我们服务器上的内容（忽略任何其他外部更新）。 是否可以更新基础值 form.reset() 将每个表单元素更改为无需刷新页面？

跨浏览器支持会很好，但由于这是一个内部应用程序，只有谷歌浏览器就足够了。

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]等

很抱歉给您带来了困惑。

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

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

Answer 3

类似这样的：

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

正如 David Budiac 在他的评论中提到的，这不适用于选择元素。选择元素有一个名为 defaultSelected 的单独属性。

More about the defaultValue property

我知道这些链接指向 Microsoft 的网站，但它们似乎适用于几乎所有主流浏览器。