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

Reverting Form Data with Cancel button

本文关键字：表单 数据 恢复 按钮 取消      更新时间：2023-09-26

是否有一种优雅的方法可以在表单旁边插入一个取消(或恢复)按钮，从而在用户开始编辑之前基本上恢复表单的内容?

例如

  1. 用户有一个帐户，想要更改用户名。
    2. 他们来到表单，看到输入字段已经填充了用户名:joeuser
  2. 他们开始编辑字段并改变主意
  3. 点击取消/恢复和字段恢复回用户名:joeuser—表单不只是重置与空字段

可能诉诸于太多的黑客行为?我想也许HTML5历史API可以在某种程度上用于此

如果你正在使用JQuery:

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

否则可以这样写:

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

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

您可以使用这个，将form元素作为变量传递:

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

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

相关文章：