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

Question

不幸的是，form.reset（）函数不会重置表单的隐藏输入。 签入FF3和Chromium。

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

Answer 1

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

Answer 2

不幸的是，根据标准 ，这是正确的。 一个糟糕的规格疣IMO。 IE提供了具有可重置的defaultValue隐藏字段。 看到这个讨论 ：它不是（唉）会改变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

我发现在加载文档时设置默认值更容易，然后捕获重置并将隐藏的小狗重置回其原始值。 例如，

//fix form reset (hidden fields don't get reset - this will fix that pain in the arse issue)
$( document ).ready(function() {
  $("#myForm").find("input:hidden").each(function() {
      $(this).data("myDefaultValue", $(this).val());
  });

  $("#myForm").off("reset.myarse");
  $("#myForm").on("reset.myarse", function() {
     var myDefaultValue = $(this).data("myDefaultValue");
     if (myDefaultValue != null) {
       $(this).val(myDefaultValue);
     }
  });
}

希望这有助于某人:)

Answer 5

你可以使用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"属性中。

Answer 6

创建一个按钮并将JavaScript添加到onClick事件中，该事件将清除字段。

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

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

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

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

Answer 7

我如何做到这一点是在隐藏字段的change事件上放置一个事件监听器。 在该侦听器函数中，您可以将初始值保存到DOM元素存储（ mootools ， jquery ），然后侦听表单的重置事件以恢复存储在隐藏表单字段存储中的初始值。

Answer 8

这样做：

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

Answer 9

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

对于select，checkbox，radio，最好知道（保持）默认值，并在该事件处理程序中将它们设置为默认值。

Answer 10

您可以使用下面的行重置隐藏的输入字段值，您只需要更改表单ID而不是frmForm 。

$("#frmForm input:hidden").val(' ');