CODEWITHSUNDEEP
javascriptjquery
Yekver
Yekver

Reputation: 5185

Jquery form get default values

If I have code like this:

<form id="test_form">
   <input type="text" value="Original value" />
</form>

Then using jQuery I run this code:

$('#test_form input').val('New value');

So input have new value, but I wanna get the old one, so I do:

$('#test_form')[0].reset();

now $('#test_form input').val() == 'Original value';

But reset method reset all form inputs and restore there default values, so how can I restore default value just in definite input?

Upvotes: 1

Views: 1434

Answers (6)

pavel
pavel

Reputation: 14

//  Sample Usage
//  $(document).ready(function(){ $.snapshot("#myForm"); }); Take shapshot
//  event, function(){ $.reset("#myForm"); }  Rest Form On Some Event

(function($) { 
    $.fn.getAttributes = function() { 
        var attributes = {};  

        if(!this.length) 
            return this; 

        $.each(this[0].attributes, function(index, attr) { 
            attributes[attr.name] = attr.value; 
        });  

        return attributes; 
    } 
})(jQuery);

(function($)
{   
    jQuery.snapshot = function(form)
    {
        var form = $(form);

        var elements = form.find("input, select, textarea");

        if(elements && elements.length)
        {
            elements.each(function(){

                var attributes = $(this).getAttributes();
                var tagName = $(this).prop("tagName").toLowerCase();
                var safe_attributes = {};

                for(i in attributes)
                {
                    var jq_attr = $(this).attr(i);

                    if(jq_attr != "undefined")
                    {
                        safe_attributes[i] = jq_attr;
                    }
                }

                if(tagName == "select")
                {
                    var option = $(this).find("option:selected");
                    if(option && option.length)
                    {
                        var init_selected = option.attr("value");
                        safe_attributes['init_selected'] = init_selected;
                    }
                }

                if(tagName == "textarea")
                {
                    var init_value = $(this).val();
                    safe_attributes['init_value'] = init_value;
                }

                $.data( $(this).get(0), "init_attr", safe_attributes );
            });
        }
    }

    jQuery.reset = function(form)
    {
        var form = $(form);

        var elements = form.find("input, select, textarea");

        var reset_btn = $('<input type="reset" name="reset" />');

        form.append(reset_btn);

        reset_btn.trigger("click");

        reset_btn.remove();

        if(elements && elements.length)
        {
            elements.each(function(){

                var init_attributes = $(this).data("init_attr");
                var attributes = $(this).getAttributes();
                var tagName = $(this).prop("tagName").toLowerCase();

                for(i in attributes)
                {
                    if(i.toLowerCase() == "value" || i.toLowerCase() == "checked" || i.toLowerCase() == "selected")//if(i.toLowerCase() != "type")
                    {
                        var attr_found = false;

                        for(a in init_attributes)
                        {
                            if(i == a)
                            {
                                $(this).attr(a, init_attributes[a]);
                                attr_found = true;
                            }
                        }

                        if(!attr_found)
                        {
                            $(this).removeAttr(i);
                        }
                    }
                }

                if(tagName == "select" && 'init_selected' in init_attributes)
                {
                    $(this).find("option:selected").removeAttr("selected");
                    var option = $(this).find("option[value="+init_attributes['init_selected']+"]");
                    if(option && option.length)
                    {
                        option.attr("selected", "selected");
                    }
                }

                if(tagName == "textarea")
                {
                    if('init_value' in init_attributes)
                    {
                        $(this).val(init_attributes['init_value']);
                    }
                }

                $(this).trigger("change");

            });
        }
    }
})(jQuery);

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237845

You could very easily build a plugin to do this, using the defaultValue property, which corresponds to the original state of the element.

$.fn.reset = function() {
    this.each(function() {
        this.value = this.defaultValue;
    });
};

You can then call this plugin like this:

$('someSelector').reset();

Upvotes: 1

simoncereska
simoncereska

Reputation: 3043

I would suggest using placeholder attribute for inputs and textareas.

Upvotes: 0

James Allardice
James Allardice

Reputation: 165971

You can use the defaultValue property:

this.value = this.defaultValue;

For example, the following code would reset the field to its default value when the blur event is fired:

$("#someInput").blur(function() {
   this.value = this.defaultValue; 
});

And here's a working example.

Upvotes: 1

Einacio
Einacio

Reputation: 3532

on jQuery 1.6+

$('#test_form input').prop('defaultValue');

on older versions use .attr() instead of .prop()

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Try whatever the jQuery equivalent to JavaScript's .getAttribute('value') is - the attribute does not change even if the value itself does.

Upvotes: 0

Related Questions