JavaScript：隐藏字段的真实表单重置

Question

不幸的是，

form.reset()

函数不会重置表单的隐藏输入。 已检查 FF3 和 Chromium。

有人知道如何重置隐藏字段吗？

Answer 1

似乎最简单的方法是使用

<input style="display: none" type="text"/>

字段而不是

<input type="hidden"/>

字段。 在这种情况下，定期进行默认重置过程。

Answer 2

不幸的是，

这是正确的按照标准。在我看来，这是一个糟糕的规格疣。尽管如此，IE 仍提供了具有可重置功能的隐藏字段。请参阅

此讨论

：（唉）HTML5 不会改变。 （幸运的是，很少需要重置表单。作为 UI 功能，它通常不受欢迎。）

由于您根本无法获取

defaultValue

属性的原始值，因此您必须将其复制到另一个属性中并获取它。例如：

value

走私该值的替代方法可能包括 HTML5 

<form id="f">

<input type="hidden" name="foo" value="bar" class="value=bar"/>

function resetForm() {
    var f= document.getElementById('f');
    f.reset();
    f.elements.foo.value= Element_getClassValue(f.elements.foo, 'value');
}

function Element_getClassValue(el, classname) {
    var prefix= classname+'=';
    var classes= el.className.split(/\s+/);
    for (var i= classes.length; i-->0;)
        if (classes[i].substring(0, prefix.length)===prefix)
            return classes[i].substring(prefix.length);
    return '';
}

、另一个备用属性（如

data

）、紧随其后的用于读取值的

title

、显式附加 JS 信息或仅用于保存默认值的额外隐藏字段价值观。无论采用什么方法，它都会使 HTML 变得混乱；它无法在文档准备好时由脚本创建，因为在代码执行时，某些浏览器已经用记住的值（通过重新加载或按后退按钮）覆盖了该字段的值。

Answer 3

<!-- comment -->

然后，重置表格：

var serializedForm = $('#myForm').serialize();

Answer 4

function fullReset(){

    $('#myForm').reset(); // resets everything except hidden fields


    var formFields = decodeURIComponent(serializedForm).split('&'); //split up the serialized form into variable pairs

    //put it into an associative array
    var splitFields = new Array();
    for(i in formFields){
        vals= formFields[i].split('=');
        splitFields[vals[0]] = vals[1];
    }
    $('#myForm').find('input[type=hidden]').each(function(){    
        this.value = splitFields[this.name];
    });

}

提示：只需确保您没有重置 csrf 令牌字段或任何其他不应清空的内容。如果需要，您可以缩小元素的规格范围。

如果您想将该字段重置为默认值，您可以使用（未测试）：

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).val('');
});

并将默认值保存在 

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).each(function() {
    var $t = $(this);
    $t.val($t.data('defaultvalue'));
  });
});

属性中。

Answer 5

data-defaultvalue="Something"

希望这可以帮助别人:)

Answer 6

对于选择、复选框、单选，最好了解（保留）默认值，并在该事件处理程序中将它们设置为其默认值。

Answer 7

$('#form :reset').on('click',function(e)({
    e.preventDefault();
    e.stopImmediatePropagation();
    $("#form input:hidden,#form :text,#form textarea").val('');
});

事件以清除字段。

也就是说，我很好奇你为什么要重置这些字段。通常，它们包含内部数据。如果我在代码中清除它们，表单的发布将会失败（例如，在用户输入新数据并尝试提交表单之后）。

[编辑]我误解了你的问题。如果您担心有人可能篡改隐藏字段中的值，则无法重置它们。例如，您可以在表单上调用

onClick

，但不能在表单中的字段上调用。

您可能认为可以将值保存在 JavaScript 文件中并使用它来重置值，但是当用户可以篡改隐藏字段时，他也可以篡改 JavaScript。

因此，从安全角度来看，如果您需要重置隐藏字段，那么首先要避免它们，并将信息保存在服务器上的会话中。

Answer 8

mootools

、jquery），然后监听表单的重置事件以恢复存储在隐藏表单字段存储中的初始值。

Answer 9

reset()

Answer 10

$("#form input:hidden").val('').trigger('change');

。

frmForm