JavaScript: True form reset for hidden fields

Unfortunately form.reset() function does开发者_高级运维n't reset hidden inputs of the form. Checked in FF3 and Chromium.

Does any one have an idea how to do the reset for hidden fields as well?

Seems the easiest way of doing that is having <input style="display: none" type="text"/> field instead of <input type="hidden"/> field. At this case default reset process regularly.

This is correct as per the standard, unfortunately. A bad spec wart IMO. IE provides hidden fields with a resettable defaultValue nonetheless. See this discussion: it's not (alas) going to change in HTML5.

(Luckily, there is rarely any need to reset a form. As a UI feature it's generally frowned upon.)

Since you can't get the original value of the value attribute at all, you would have to duplicate it in another attribute and fetch that. eg.:

<form id="f">

<input type="hidden" name="foo" value="bar" class="value=bar"/>

function resetForm() {
    var f= document.getElementById('f');
    f.reset();
    f.elements.foo.value= Element_getClassValue(f.elements.foo, 'value');
}

function Element_getClassValue(el, classname) {
    var prefix= classname+'=';
    var classes= el.className.split(/\s+/);
    for (var i= classes.length; i-->0;)
        if (classes[i].substring(0, prefix.length)===prefix)
            return classes[i].substring(prefix.length);
    return '';
}

Alternative ways of smuggling that value in might include HTML5 data, another spare attribute like title, an immediately-following <!-- comment --> to read the value from, explicit additional JS information, or extra hidden fields just to hold the default values.

Whatever approach, it would have to clutter up the HTML; it can't be created by script at document ready time because some browsers will have already overridden the field's value with a remembered value (from a reload or back button press) by that time that code executes.

Another answer, in case anyone comes here looking for one. Serialize the form after the page loads and use those values to reset the hidden fields later:

var serializedForm = $('#myForm').serialize();

Then, to reset the form:

function fullReset(){

    $('#myForm').reset(); // resets everything except hidden fields


    var formFields = decodeURIComponent(serializedForm).split('&'); //split up the serialized form into variable pairs

    //put it into an associative array
    var splitFields = new Array();
    for(i in formFields){
        vals= formFields[i].split('=');
        splitFields[vals[0]] = vals[1];
    }
    $('#myForm').find('input[type=hidden]').each(function(){    
        this.value = splitFields[this.name];
    });

}

You can use jQuery - this will empty hidden fields:

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).val('');
});

Tip: just make sure you're not resetting csrf token field or anything else that shouldn't be emptied. You can narrow down element's specification if needed.

If you want to reset the field to a default value you can use(not tested):

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).each(function() {
    var $t = $(this);
    $t.val($t.data('defaultvalue'));
  });
});

and save the default value in the data-defaultvalue="Something" property.

I found it easier to just set a default value when the document is loaded then trap the reset and reset the hidden puppies back to their original value. For example,

//fix form reset (hidden fields don't get reset - this will fix that pain in the arse issue)
$( document ).ready(function() {
  $("#myForm").find("input:hidden").each(function() {
      $(this).data("myDefaultValue", $(this).val());
  });

  $("#myForm").off("reset.myarse");
  $("#myForm").on("reset.myarse", function() {
     var myDefaultValue = $(this).data("myDefaultValue");
     if (myDefaultValue != null) {
       $(this).val(myDefaultValue);
     }
  });
}

Hope this helps someone out :)

$('#form :reset').on('click',function(e)({
    e.preventDefault();
    e.stopImmediatePropagation();
    $("#form input:hidden,#form :text,#form textarea").val('');
});

For select, checkbox, radio, it's better you know (hold) the default values and in that event handler, you set them to their default values.

Create a button and add JavaScript to the onClick event which clears the fields.

That said, I'm curious why you want to reset these fields. Usually, they contain internal data. If I would clear them in my code, the post of the form would fail (for example after the user has entered the new data and tries to submit the form).

[EDIT] I misunderstood your question. If you're worried that someone might tamper with the values in the hidden fields, then there is no way to reset them. For example, you can call reset() on the form but not on a field in the form.

You could think that you could save the values in a JavaScript file and use that to reset the values but when a user can tamper with the hidden fields, he can tamper with the JavaScript as well.

So from a security point of view, if you need to reset hidden fields, then avoid them in the first place and save the information in the session on the server.

How I would do it is put an event listener on the change event of the hidden field. In that listener function you could save the initial value to the DOM element storage (mootools, jquery) and then listen to the reset event of the form to restore the initial values stored in the hidden form field storage.

This will do:

$("#form input:hidden").val('').trigger('change');

You can reset hidden input field value using below line, you just need to change your form id instead of frmForm.

$("#frmForm input:hidden").val(' ');