javascript:隐藏字段的真正表单重置

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

这是正确的 as per the standard ,很不幸。imo.ie提供了一个可重置的隐藏字段。 defaultValue 尽管如此。见 this discussion :HTML5不会改变(唉)。

(幸运的是,很少需要重置表单。作为一个用户界面功能,它通常是不受欢迎的。)

因为你不能得到 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弄得一团糟;它不能在文档就绪时由脚本创建,因为在代码执行时,一些浏览器已经用一个记住的值(通过重新加载或按后退按钮)覆盖了字段的值。

另一个答案,以防有人来找我。 在页面加载后序列化表单,并在以后使用这些值重置隐藏字段:

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

}

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

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

希望这能帮助别人:)

您可以使用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" 财产。

创建一个按钮并将javascript添加到 onClick 清除字段的事件。

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

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

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

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

我要做的是在隐藏字段的change事件上放置一个事件侦听器。在侦听器函数中,可以将初始值保存到dom元素存储中( mootools , jquery )然后侦听窗体的重置事件以还原隐藏窗体字段存储中存储的初始值。

这样可以:

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

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

对于select、checkbox、radio,最好知道(保持)默认值,然后在该事件处理程序中,将其设置为默认值。

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

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