Question

If I change an inputs value and want to reset it back to the original value onClick of a link how can I accomplish that?

I can use .data() to grab and store the original value but I am not sure of the best way to restore it if needed.

HTML:

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

This is how I think it would work…

In the HTML above, the input will be rendered with a value of “100”. If I then click “edit” I can use .date() to store the original value (100). I can then change the value of the input but if I wanted to reset the value back it’s original state I would need to call the .data() info and use it to restore the value of the input.

How would I do that using jQuery?

Answer 1

using .data is perfect for that. look no further

update – with some code directions

Assuming you want to have this done for many input fields and not just one I am assuming each input+edit+reset are contained in a single parent

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

and in your init script block

$(".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"));
             });

I didn’t test it but it should work