Clear form fields with jQuery

Question

I want to clear all input and textarea fields in a form. It works like the following when using an input button with the reset class:

$(\".reset         


        

Answer 1

I've written a universal jQuery plugin:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

Form

    


    Ch 1 (default checked) 

    Ch 2 

    Ch 3 (default checked) 


    

        15
        30
        45
    


    R 1 

    R 2 (default checked) 

    R 3 


    Default text


    
    
Play with form values and then try to reset them
    
    Reset text input
    Reset checkboxes
    Reset select
    Reset radios
    Reset textarea
    Reset the Form