Javascript 为什么不'；当我对表单元素执行reset方法时，隐藏字段是否被重置？

我想重置id为

user\u 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>

提交

很遗憾，无法重置隐藏字段。

---

但是您可以将

style='display:none'

放在文本字段上，而不是将其隐藏在输入字段中。这样重置也会对它们起作用

符合标准：

为了“隐藏”他们不想要的字段（即能够重置它），在字段上使用css（

display:none

）。

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

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

也可以手动清空该字段

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

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

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

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

$（'#reset_btn'）。单击（函数（）{
$（“#您的#表单”）[0].reset（）；
});

如上所述，类型为

隐藏的
表单字段不受表单元素的
重置
操作的影响

这种行为可以在中看到

如果您需要能够将表单的隐藏字段重置为其初始状态，则首先需要在页面加载时用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];
                }
            }   
        }
    }
})();

也许他改变了隐藏字段的值，基于与其他表单元素的交互？是的，我也这么认为！例如，可能是一个颜色选择器或日历，你的第一段代码没有做OP代码还没有做的事情。答案的第二部分是一个解决方案，它不尊重隐藏字段的原始值。我刚刚注意到你的第一句话。在OP的代码中，
#user_post
是他的表单。他没有对每个字段调用
reset（）
。他正在表单上调用
reset（）
each（）
正在迭代jQuery选择器
“#user_post”
选择的jQuery元素集合，它只是
表单类型的单个元素。我想你是对的。为了将字段重置为其原始值，您必须从一开始就将其存储在某个位置，如数据属性a）您在回答中没有解释任何内容。B） 您的答案与原始答案中的代码没有什么不同，只是没有使用
$进行迭代。您只需引用jQuery集合中的第一个节点，然后对其调用
reset（）
。它执行相同的功能。
;(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);
    }
})();