爲什麼當我在表單元素上執行重置方法時，我的隱藏字段未被重置？

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

如前所述@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 2

這家飯店目前無法復位隱藏字段。 但您可以將style='display: none'放在文本字段上，而不是將它們設置爲隱藏的輸入字段。這種方式重置也會對他們起作用。

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