使用“取消”按钮还原表单数据

时间:2013-06-20 19:29:20

标签: javascript html5 forms input

是否有一种优雅的方法可以在表单旁边插入取消(或恢复)按钮,在用户开始编辑之前,该按钮基本上会还原表单的内容。

例如,

  1. 用户拥有一个帐户,并希望更改其用户名。
  2. 他们来到表单,看到输入字段填充了用户名:joeuser
  3. 他们开始编辑字段并改变主意
  4. 点击取消/恢复,字段将恢复为用户名:joeuser - 表单不会仅使用空字段重置
  5. 可能诉诸过多的hackery?我想也许HTML5历史API可以用于某种方式。

3 个答案:

答案 0 :(得分:0)

您可以使用jQuery:     $( “#formID”)[0] .reset段();

答案 1 :(得分:0)

如果您使用的是JQuery:

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

否则你可以使用它:

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

答案 2 :(得分:-1)

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

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来保存用户名并通过这个简单的功能恢复它。