修改底层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');