Question

I use the code below to set default values for input objects. This works fine for text inputs but select dropdowns, radio buttons and check boxes are not reset to their default values.

How can I solve this?

function ResetForm(form) {

    $(":input", form).not(":button, :submit, :reset, :hidden").each(function () {
        this.value = this.defaultValue;
    });

}

p.s. I use this method to reset inputs which are in a div node; I pass the div‘s id into this function.

Answer 1

defaultValue exists for radio buttons and checkboxes, but you have misunderstood what the “value” of these elements is. It is not “which” or “whether” is selected/checked, but the underlying value that is part of the form contents if the element is selected/checked… whereas you want the former.

And defaultValue simply doesn’t exist for select, which doesn’t really have a value, but one or more selected option children.

You have a couple of options here.

---

Option 1: Wrap the inputs in a form

You said you don’t have a form, but why not make it so that you do? Although the W3C spec doesn’t require that inputs be under a <form /> node, it would make sense.

Then:

form.reset()

Or, if your form is a jQuery element set (and it looks like it probably is):

form[0].reset()

---

Option 2: Hack it

If you really insist, you can hack it about, caching initial values using a mix of $.attr and $.prop. Make sure that you’re using jQuery 1.6.1+ though.

$(function() {
    prepareForm($('#myForm'));
    $('#myButton').click(function() {
       resetForm($('#myForm'));
    });
});

function prepareForm($form) {
    // Cache initial states
    $('input:checkbox, input:radio', $form).each(function() {
        $(this).prop('initial', $(this).is(':checked'));
    });
    $('select', $form).each(function() {
        $(this).prop('initial', this.selectedIndex);
    });
}

function resetForm($form) {
    // Reset elements on button press
    $('input:checkbox, input:radio', $form).each(function() {
        $(this).attr('checked', $(this).prop('initial'));
    });
    $('select', $form).each(function() {
        this.selectedIndex = $(this).prop('initial');
    });
}

Live demo.

---

^{(Note to other contributors: I originally looked at simply resetting the element to the state specified by $.attr, but I guess even 1.6.1+’s $.attr doesn’t work quite how I thought.)}