Why aren't my hidden fields being reset when I execute the reset method on a form element?

Question

I want to reset my form having id user_post. This form contains hidden fields also. I used this code to reset input form fields

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

My form given bellow

<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

it is unfortunately not possible to reset hidden fields. but you can put style='display: none' on the text fields rather than making them hidden input fields. this way reset will work on them too.

Answer 2

As @VolkanUlukut mentioned, form fields of type hidden are not affected by the reset action of a form element.

This behavior can be seen in this jsFiddle example.

If you need to be able to reset your form's hidden fields to their initial state, you will first need to make a map in JavaScript of their initial values at page load, and then restore that state at the form reset event.

I implemented this functionality in vanilla JavaScript, as can be seen below:

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

See a demonstration at jsFiddle.

Warning This script will not work properly if you are dynamically adding forms to the page.

Warning This script was written to only work with addEventListener. If you need better browser support, use jQuery event binding, or modify the function to also use attachEvent.

Another method would be to store the initial state of the hidden element in a data-* attribute, then on reset, set the hidden fields to that value.

Here's a 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);
    }
})();