How to reset a value to its original state, if it is changed

Question

If I change the input value and want to reset it back to the original onClick value of the link, how can I do this?

I can use .data () to capture and save the original value, but I'm not sure what the best way to restore it if necessary.

HTML:

<input class="someClassName" type="text" value="100" /> 
<a href="#">Edit</a>
<a href="#">Reset</a>

This is how I think it will work ...

In the above HTML, the input will be displayed with a value of "100". If I then click Change, I can use .date () to keep the original value (100). Then I can change the input value, but if I wanted to reset back to its original state, I would need to call the .data () information and use it to restore the input value.

How do I do this using jQuery?

Answer 1

.data .

-

, , , , , + edit + reset

<div>    
    <input class="someClassName" type="text" value="100" /> 
    <a class="EditLink" href="#">Edit</a>
    <a class="ResetLink" href="#">Reset</a>
</div>

init script

$(".EditLink").click(
             function() {
                $(this).parent().children("INPUT").data("val",
                  $(this).parent().children("INPUT").val());
             });
$(".ResetLink").click(
             function() {
                $(this).parent().children("INPUT").val(
                  $(this).parent().children("INPUT").data("val"));
             });

,

Answer 2

id, .

<input class="someClassName" id="theInput" type="text" value="100" /> 
<a href="#" id="Edit">Edit</a>
<a href="#" id="Reset">Reset</a>

<script type="text/javascript">
        $(document).ready(function{
            $("#Edit").click(function{
                   $("#theInput").data('originalValue',$("#theInput").val());
                   });
            $("#Reset").click(function{
                   $("#theInput").val($("#theInput").data('originalValue'));                       
                   });
         });