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

Question

不幸的是,form.reset()函数不会重置表单的隐藏输入.签入FF3和Chromium.

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

Answer 1

似乎最简单的方法是显示:无文本字段而不是隐藏字段.在这种情况下,定期默认重置过程.

Answer 2

不幸的是,根据标准,这是正确的.一个糟糕的规格疣IMO.defaultValue尽管如此,IE提供了具有可重置的隐藏字段.看到这个讨论:它不是(唉)会改变HTML5.

(幸运的是,很少需要重置表单.作为UI功能,它通常不受欢迎.)

由于您根本无法获取value属性的原始值,因此您必须在另一个属性中复制它并获取它.例如.:

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

走私这种价值的另一种方式可能包括HTML5 data,另一个备用属性,例如title,立即跟踪<!-- comment -->读取值,显式附加JS信息,或额外隐藏字段以保存默认值.

无论采用何种方法,都必须弄乱HTML; 它不能在文档就绪时由脚本创建,因为某些浏览器已经用代码执行时记住的值(从重新加载或按下后退按钮)覆盖了字段的值.

Answer 3

另一个答案,万一有人来这里寻找一个.在页面加载后序列化表单并使用这些值稍后重置隐藏字段:

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

然后,重置表单:

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

}

Answer 4

您可以使用 jQuery - 这将清空隐藏字段：

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

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

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

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

并将默认值保存在data-defaultvalue="Something"属性中。