CODEWITHSUNDEEP
jquery
Tomas
Tomas

Reputation: 18097

Set default values for input objects

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.

Upvotes: 0

Views: 1505

Answers (2)

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385144

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.)

Upvotes: 2

user500944
user500944

Reputation:

Because the value of a radio button is determined not by the "value" attribute, but by the "checked" attribute.

The following code seems to work as expected (http://jsfiddle.net/eVnMA/2/ ):

function reset(form)
{
    $(":input", form).not(":button, :submit, :reset, :hidden").each(function () {
        var type = $(this).attr("type");
        if(type != "radio" && type != "checkbox") this.value = this.defaultValue;
        else this.checked = $(this).data("default_value");
    });

}
$("#cb").data("default_value", null);
$("#btn").click(function(){reset("#aaa");});

Note that it makes no sense to use the defaultValue attribute in case of checkboxes/radio-buttons. But you can keep the desired default value by associating some data with the appropriate element.

However, I still think that the right way to achieve what you want would be to just use normal forms.

Upvotes: 0

Related Questions