HTML

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

更新

的Ack！我没有提到我正在寻找处理所有表单元素类型的东西。即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在评论中提到的，这对选择元素不起作用。选择元素具有名为defaultSelected的单独属性。

More about the defaultValue property

我意识到这些链接会转到微软的网站，但它们似乎适用于所有主流浏览器。

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

修改底层form.reset（）值

HTML

JAVASCRIPT

更新

3 个答案: