Jquery表单获取默认值

Jquery form get default values

本文关键字：默认值获取表单 Jquery 更新时间：2023-09-26

如果我有这样的代码:

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

然后使用jQuery运行以下代码:

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

输入有新值，但我想要得到旧值，所以我这样做:

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

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

但是reset方法重置所有表单输入并恢复其默认值，所以我如何在明确的输入中恢复默认值?

jQuery 1.6+

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

在旧版本中使用.attr()而不是.prop()

您可以使用defaultValue属性:

this.value = this.defaultValue;

例如，以下代码将在触发blur事件时将字段重置为默认值:

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

这里有一个例子

你可以很容易地构建一个插件来做到这一点，使用defaultValue属性，这对应于元素的原始状态。

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

你可以这样调用这个插件:

$('someSelector').reset();

试试jQuery等效的JavaScript的.getAttribute('value') -即使值本身改变了，属性也不会改变。

我建议使用placeholder属性的输入和文本区域。

//  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);