Home » Web » Javascript » HTMLInputElement’s defaultValue

HTMLInputElement’s defaultValue

Did you know that you can know the original value written by the server to the client by calling:

var originalName =document.getElementById("txtUserName").defaultValue;

Yes, the Dom contain for every Html element of type HTMLInputElement and HTMLTextAreaElement the possibility to access the original value. This is interesting to know if a form has dirty inputs. It’s also interesting because it removes the need to hide values into hidden fields or to hide into a Javascript object all original values.

From the ECMAScript’s specification we can see that it’s a property that return a string. It’s also possible to know if the value was originally checked in the case of a checkbox with defaultChecked.

From here it’s easy to know if a Html form is dirty (has something changed). We just need to loop through all inputs and compare.

function TestDirty(){
 var formDirty = false;
 $('#frm :input').each(
        function(){

            if($(this).is("input"))
            {
                //alert('Name :' + $(this).attr('name') + ">" +$(this).val()+ " != " + $(this)[0].defaultValue);
                var type = $(this).attr('type');
                if (type == "checkbox" || type == "radio")
                {

                    if ($(this).is(':checked') != $(this)[0].defaultChecked)
                    {
                        //alert('Form dirty by' + $(this).attr('name') + ">" +$(this).is(':checked')+ " != " + $(this)[0].defaultChecked);
                        formDirty = true;
                    }
                }
                else if (type == "hidden" || type == "password" || type == "text")
                {
                    if ($(this).val() != $(this)[0].defaultValue)
                    {
                        //alert('Form dirty by' + $(this).attr('name') + ">" +$(this).val()+ " != " + $(this)[0].defaultValue);
                        formDirty  =true;
                    }
                }
            }
            else
            {
                var type = $(this).get(0).tagName;
                if (type == "TEXTAREA")
                {
                    if ($(this).val() != $(this)[0].defaultValue)
                    {
                        //alert('Form dirty by' + $(this).attr('name') + ">" +$(this).val()+ " != " + $(this)[0].defaultValue);
                        return formDirty;
                    }
                }
                else(type == "SELECT")
                {
                    alert('Form dirty by ' + $(this).attr('name') + ">" +$(this).val()+ " != " + $(this)[0].defaultSelected);
                     if ($(this).val() != $(this)[0].defaultSelected)
                    {
                        //alert('Form dirty by' + $(this).attr('name') + ">" +$(this).val()+ " != " + $(this)[0].defaultValue);
                        return formDirty;
                    }
                }
            }             
        });    

return formDirty;    
}

You can have the above code functional here. The only case that doesn’t seem to work is the select box which the value is undefined. If someone has the code to fix it, feel free to post it.

ECMAScript specification about defaultValue
DefaultValue W3C reference

If you like my article, think to buy my annual book, professionally edited by a proofreader. directly from me or on Amazon. I also wrote a TypeScript book called Holistic TypeScript

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.