JQuery: Get original input value

Question

Is it possible to get the initial value of a form input field?

For example:

<form action="" id="formId">
    <input type="text" name="one" value="one" id="one" />
</form>

$("#one").attr("value");   //would output "one"
$("#one").val();           //would output "one"
$("#one").get(0).value;    //would output "one"

However, if the user then changed the content of the #one input field to two, the html would still look the same (with one as the value) but the JQuery calls above would return two.

JSFiddle to play with: http://jsfiddle.net/WRKHk/

I think that this must still be possible to get the orginal value, since we are able to call document.forms["formId"].reset() to reset the form to its original state.

$(this).get(0) is a ridiculous way of writing this... you really don't have to use jQuery here :P — Šime Vidas
– Šime Vidas, Commented Dec 13, 2011 at 14:06

RightSaidFred · Accepted Answer · 2011-12-13 14:11:30Z

35

Try this:

$("#one")[0].defaultValue;

edited Dec 13, 2011 at 14:11

RightSaidFred

11.3k38 silver badges36 bronze badges

answered Dec 13, 2011 at 14:06

graphicdivine

11.3k7 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RightSaidFred Over a year ago

+1 for defaultValue, but you had forgotten to extract the DOM element.

graphicdivine Over a year ago

Thanks, RightSaidFred. Well spotted.

Brilliand Over a year ago

For checkboxes and radio buttons, you'll need to use defaultChecked instead.

David Hedlund · Accepted Answer · 2011-12-13 14:10:38Z

16

The DOM element has the attribute "value" which you can access by:

element.getAttribute('value');

... which may be different from the element's property value.

Demo

Note that you may call .setAttribute('value', 'new value') which will actually affect any form.reset() that is called after.

edited Dec 13, 2011 at 14:10

answered Dec 13, 2011 at 14:04

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

10 Comments

Šime Vidas Over a year ago

@David But why doesn't $( this ).attr( 'value' ) return the same as this.getAttribute( 'value' )? I think it should...

Šime Vidas Over a year ago

@RightSaidFred You mean it's a bug? I find that hard to believe. The attr() method has been around for a long time. All bugs should have been removed by now. There must be a valid reason why attr() doesn't fully map to getAttribute()...

RightSaidFred Over a year ago

@ŠimeVidas: Define bug. If you expect attr() to give you the attribute value, then it was originally created with built in bugs. If you want attr() to be unclear as to whether you're dealing with the property or the attribute, then it works perfectly.

RightSaidFred Over a year ago

@ŠimeVidas: Exactly. You originally stated There must be a valid reason why attr() doesn't fully map to getAttribute(). But in version 1.0 there are no backward compatibility issues. ;)

Šime Vidas Over a year ago

@RightSaidFred I meant why it doesn't fully map now (in 1.7). It didn't map in 1.0 because there was no prop(), so attr() was designed to retrieve either the DOM property or content attribute, and in cases where both would exist, the property had precedence (since it's more important). However, since we do have prop() now, I expected attr() to fully map (at last). :/

|

user447356 · Accepted Answer · 2011-12-13 14:13:13Z

9

Input element got property called defaultValue that is storing the original value.

To reach it via jQuery, just use .prop():

var value = $(this).prop("defaultValue");

Updated jsFiddle - after changing to "two", the above will return "one".

answered Dec 13, 2011 at 14:13

user447356

Comments

techfoobar · Accepted Answer · 2011-12-13 14:04:42Z

2

The HTML does change. Just that the browser's default view source tool always shows you the original source fetched from server. If you use something like Firebug, you'll be able to see the dynamic changes in HTML.

One way of getting the initial value is by storing it in an additional attribute in addition to 'value'. For example, if you serve out your HTML like:

<input type="text" name="one" value="one" origvalue="one" id="one" />

You can always get back the original value by calling:

$("#one").attr("origvalue");

answered Dec 13, 2011 at 14:04

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

1 Comment

My Head Hurts Over a year ago

+1 - a creative solution, but @David Hedlund's answer is the one I was looking for!

Tom Maeckelberghe · Accepted Answer · 2011-12-13 14:05:07Z

0

Save the original_values @ document.ready.

$(function(){
  var original_values = $.map($('form input'), function(input){ return $(input).val() });
})

answered Dec 13, 2011 at 14:05

Tom Maeckelberghe

1,9993 gold badges21 silver badges24 bronze badges

Comments

will · Accepted Answer · 2011-12-13 14:06:51Z

0

You could try storing the value in data. For example:

$('#one').data('val',$('#one').val());

And then you could easily retrieve it later like this:

console.log($('#one').data('val'));

answered Dec 13, 2011 at 14:06

will

4,5956 gold badges35 silver badges34 bronze badges

Comments

bondythegreat · Accepted Answer · 2011-12-13 14:07:24Z

0

var initialVal = $('#one').val();
alert(initialVal);
$('#one').live("focusout", function() {
    var attribute = $("#one").attr("value");
    var value = $(this).val();
    var get = $(this).get(0).value;
    alert( "Attribute: " + attribute + "\n\nValue: " + value + "\n\ninit val: " + initialVal +"\n\nGet: " + get );
});

answered Dec 13, 2011 at 14:07

bondythegreat

1,40912 silver badges21 bronze badges

Collectives™ on Stack Overflow

JQuery: Get original input value

7 Answers 7

3 Comments

10 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

10 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related