使用取消按钮恢复表单数据答案

【问题标题】：Reverting Form Data with Cancel button使用取消按钮恢复表单数据
【发布时间】：2013-06-20 19:29:19
【问题描述】：

有没有一种优雅的方法可以在表单旁边插入一个取消（或恢复）按钮，从而在用户开始编辑之前恢复表单的内容。

例如，

用户有一个帐户并想要更改其用户名。
他们来到表单，看到输入字段填充了用户名：joeuser
他们开始编辑字段并改变主意
点击取消/恢复，字段恢复为用户名：joeuser——表单不只是用空字段重置

可能诉诸过多的骇客？我想也许 HTML5 历史 API 可以以某种方式用于此。

【问题讨论】：

你可以获取表单，克隆它，将克隆保存在内存中，如果用户点击取消，将表单替换为克隆的副本？

标签： javascript html forms input

【解决方案1】：

如果您使用的是 JQuery：

$('#FormID').each(function(){
  this.reset();
});

否则你可以使用这个：

document.getElementById('myForm').reset();

【讨论】：

你看到标签jquery了吗？
@LightStyle OP 没有指定......我也在添加一个纯 JS 解决方案。

【解决方案2】：

你可以使用 jQuery： $("#formID")[0].reset();

【讨论】：

你看到标签jquery了吗？
不。所以呢？和 document.forms[0].reset() 是一回事（如果有多个表单，只需更改索引）

【解决方案3】：

你可以使用这个，将表单元素作为变量传递：

function resetForm(form) {
    var elems = form.elements;
    for (i = 0; i < elems.length; i++) {
        var current = elems[i],
            type = current.type.toLowerCase();
        switch (type) {
            case "select-one":
            case "select-multi":
                current.selectedIndex = -1;
                break;
            case "checkbox":
            case "radio":
                if (current.checked) {
                    current.checked = false;
                }
                break;
            case "password":
            case "textarea":
            case "text":
            case "hidden":
                current.value = "";
                break;
            default:
                break;
        }
    }
}

这只是为了清除表单，您可以使用cookies保存用户名并通过这个简单的功能恢复它。

【讨论】：

您可以使用<input type="reset" value="Reset" />清除表单
这不完全一样，将表单重置为默认值，我将表单重置为“空白”值