当我对表单元素执行重置方法时，为什么我的隐藏字段没有被重置？

Question

我想重置 ID 为 user_post 的表单。此表单还包含隐藏字段。 我使用此代码重置输入表单字段

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

下面是我的表格

<form enctype="multipart/form-data"  id="user_post" action="/****/index.php/site/username" method="post">
<div class="tab-content">
<div id="tab-1" >
<textarea rows="3"  placeholder="Share what have been up to...." name="Userpost[usertxtpost]" id="Userpost_usertxtpost"></textarea>
</div>
<div id="tab-2" >
<textarea rows="1"  placeholder="Title...." name="Userpost[title]" id="Userpost_title"></textarea>
<input id="Userpost_image" type="hidden" value="" name="Userpost[image]" />
<input  tabindex="21"  name="Userpost[image]" id="Userpost_image" type="file" />   
<input name="Userpost[imagename]" id="Userpost_imagename" type="hidden" />
<textarea rows="3"  placeholder="about this image...." name="Userpost[coment]" id="Userpost_coment"></textarea>
</div>
<div id="tab-3" class="tab-pane row-fluid fade">
<input name="Userpost[video_title]" id="Userpost_video_title" type="hidden" />
<textarea rows="1"  placeholder="Copy and paste video url...." name="Userpost[video]" id="Userpost_video"></textarea>
<input name="Userpost[video_text]" id="Userpost_video_text" type="hidden" />
</div>
<div id="tab-4" >
<input rows="3"  placeholder="Share url...." name="Userpost[link]" id="Userpost_link" type="text" maxlength="200" />
<input name="Userpost[url_title]" id="Userpost_url_title" type="hidden" />
<input name="Userpost[url_text]" id="Userpost_url_text" type="hidden" />
<input name="Userpost[url_image]" id="Userpost_url_image" type="hidden" />
</div>
<input value="121" name="Userpost[user_id]" id="Userpost_user_id" type="hidden" />              
<button type="button" id="submitTimelinePosts">SUBMIT </button>
</div>
</form>

Answer 1

很遗憾，无法重置隐藏字段。 但是您可以将style='display: none' 放在文本字段上，而不是让它们隐藏输入字段。这种方式重置也适用于它们。

Answer 2

正如@VolkanUlukut 所述，hidden 类型的表单字段不受表单元素的reset 操作的影响。

这种行为可以在this jsFiddle example 中看到。

如果您需要能够将表​​单的隐藏字段重置为其初始状态，您首先需要在页面加载时用 JavaScript 制作其初始值的映射，然后在表单重置事件中恢复该状态。

我在原生 JavaScript 中实现了这个功能，如下所示：

;(function (undefined) {
    var i, k, form, element,
        formInfo = [];

    for (i = 0; i < document.forms.length; i++) {
        form = document.forms[i];

        formInfo[i] = {};

        for (j = 0; j < form.elements.length; j++) {
            element = form.elements[j];

            if (!element || element.type !== 'hidden')
                continue;

            formInfo[i][j] = element.value;
        }

        form.addEventListener('reset', onFormReset);
    }

    function onFormReset(e) {
        var i, k;
        for (i = 0; i < document.forms.length; i++) {
            if (document.forms[i] === this) {
                for (k in formInfo[i]) {
                    this.elements[k].value = formInfo[i][k];
                }
            }   
        }
    }
})();

查看demonstration at jsFiddle。

警告如果您向页面动态添加表单，此脚本将无法正常工作。

警告 此脚本仅适用于 addEventListener。如果您需要更好的浏览器支持，请使用 jQuery 事件绑定，或者将函数修改为也使用attachEvent。

另一种方法是将隐藏元素的初始状态存储在 data-* 属性中，然后在重置时将隐藏字段设置为该值。

这是demonstration of this method。

;(function (undefined) {
    var i, j, form, element;

    var onFormReset = function (e) {
        var i, defaultValue;

        for (i = 0; i < this.elements.length; i++) {
            element = this.elements[i];

            if (element.type !== 'hidden')
                continue;

            this.elements[i].value = element.getAttribute('data-default');
        }
    };

    for (i = 0; i < document.forms.length; i++) {
        form = document.forms[i];

        for (j = 0; j < form.elements.length; j++) {
            element = form.elements[j];

            if (element.type !== 'hidden')
                continue;

            element.setAttribute('data-default', element.value);
        }

        form.addEventListener('reset', onFormReset);
    }
})();

Answer 3

符合标准：http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-49531485

为了“隐藏”他们不想的字段（即能够重置它）在字段上使用 css (display:none)。

Answer 4

.reset() 属于表单而不是字段，因此更好的方法是

$("#resetButton").click(function(){
    $("#myForm")[0].reset();
});

How to reset (clear) form through JavaScript?

或者您可以手动清空该字段

$("#myHiddenField").val("");

但为什么要重置隐藏字段？

Answer 5

<input type="reset" id="reset_btn" value="Reset" />

$('#reset_btn').click(function(){
   $('#your_form')[0].reset();
});