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创建其初始值的映射，然后在表单重置事件中恢复该状态。 / p>

我在vanilla 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();
});

当我在表单元素上执行reset方法时，为什么不重置我的隐藏字段？

5 个答案: