7

我正在使用$('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]，等等。

对困惑感到抱歉。

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 在他的评论中提到的，这不适用于选择元素。选择元素有一个名为defaultSelected的单独属性。

有关 defaultValue 属性的更多信息

我意识到这些链接指向 Microsoft 的网站，但它们似乎在几乎所有主流浏览器中都有效。

于 2012-12-06T23:09:57.853 回答
2

Javascript 不知道重置值是什么，因此您必须在页面加载时定义它们或使用重置值创建隐藏字段。然后当你调用重置时，设置它们。

假设您在表单中的每个字段都有隐藏字段，例如文本框（您可以对下拉菜单和单选/选择执行类似的操作）

如果您有 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 回答