How to reset a particular form field using jQuery

Question

I want to know how to reset a particular form field using jQuery.

I'm using the folowing function:

function resetForm(id) {
    $('#'+id).each(function(){
        this.reset();
    });
}

but it is resetting all the fields. Is there any way to reset specific fields using jQuery or JavaScript? I want to reset only a particular field.

Answer 1

function resetForm(id) {
    $('#' + id).val(function() {
        return this.defaultValue;
    });
}

example without using id:

http://jsfiddle.net/vYWdm/

Answer 2

The reset() method affects the whole form, by design, to reset only particular input elements, assuming that there's a Reset previous inputelement after eachinput`:

$('button.reset').click(
    function(){
        var input = $(this).prev('input:first');
        input.val(''); // assuming you want it reset to an empty state;
    });

JS Fiddle demo

To reset the input to its original state, then first I'd recommend storing the original value in a data-* attribute for recollection:

$('input').each(
    function(){
        $(this).attr('data-originalValue',$(this).val());
    });

$('button.reset').click(
    function(){
        var input = $(this).prev('input:first');
        input.val(input.attr('data-originalValue'));
    });

JS Fiddle demo

Given HTML similar to the following (in which the input elements are grouped together):

<form action="#" method="post">
    <fieldset>
        <input value="something" />
        <button class="reset">Reset the input</button>
    </fieldset>
    <fieldset>
        <input type="checkbox" name="two"  />
        <input type="checkbox" name="two" checked />
        <input type="checkbox" name="two"  />
        <button class="reset">Reset the input</button>
    </fieldset>
    <fieldset>
        <input type="radio" name="three" checked />
        <input type="radio" name="three" />
        <button class="reset">Reset the input</button>
    </fieldset>
</form>

The following jQuery will reset the input elements back to their page-load state:

$('button.reset').click(
    function () {
        $(this).prevAll('input').val(function(){
            switch (this.type){
                case 'text':
                    return this.defaultValue;
                case 'checkbox':
                case 'radio':
                    this.checked = this.defaultChecked;
            }
        });
    });

JS Fiddle demo.

References:

• attr().
• prev().
• reset()
• val().