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>

Volkan Ulukut · Answer 1 · 2014-02-13T14:01:24.043

6

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.

edited Feb 13 '14 at 14:01

answered Feb 13 '14 at 13:55

Volkan Ulukut

4,230
1
20
38

score 3 · Accepted Answer · edited May 23 '17 at 11:57

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

score 0 · Answer 3 · answered Feb 13 '14 at 13:56

0

That is up to the standard: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-49531485

In order to "hide" fields they way no want (i.e. being able to reset it) use css (display:none) on the field.

answered Feb 13 '14 at 13:56

Juergen Riemer

1,393
2
13
29

score 0 · Answer 4 · edited May 23 '17 at 11:58

0

.reset() belongs to the form not the fields so a beter way to do it would be

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

How to reset (clear) form through JavaScript?

or you can manually empty that field

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

but why would you want to reset a hidden field ?

edited May 23 '17 at 11:58

Community

1
1

answered Feb 13 '14 at 13:57

alex

646
9
19

Maybe he has changed the value of the hidden field based on interaction with other form elements? – crush Feb 13 '14 at 14:08
yep i think so too ! maybe a colorpicker or calendar for example – alex Feb 13 '14 at 14:12
Your first bit of code there doesn't do anything that the OP's code isn't already doing. The second part of your answer is a *solution*, though, it doesn't respect the original value of the hidden field. – crush Feb 13 '14 at 15:41
I just noticed your first statement. In the OP's code, `#user_post` is his form. He's not calling `reset()` on each field. He's calling `reset()` on the form. `each()` is iterating the collection of jQuery elements selected by the jQuery selector `'#user_post'`, which is only a single element of type `form`. – crush Feb 13 '14 at 15:46
i guess you are right. in order to reset a field to it's original value you would have to have stored that somewhere from the beginning like a data- attribute – alex Feb 14 '14 at 09:41

score 0 · Answer 5 · edited Feb 13 '14 at 14:19

0

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

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

edited Feb 13 '14 at 14:19

alex

646
9
19

answered Feb 13 '14 at 13:58

HIRA THAKUR

17,189
14
56
87

A) You didn't explain anything in your answer. B) Your answer is no different than the code in the original answer, except, instead of iterating with `$.each`, you simply reference the first node from the jQuery collection, and call `reset()` on it. That performs the same function. – crush Feb 13 '14 at 15:35

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

5 Answers5