Persisting textbox value using jQuery

Question

I'd like to save the newly entered values, so I could reuse them. However, when I try to do the following, it does not work:

// el is a textbox on which .change() was triggered
$(el).attr("value", $(el).val()); 

When the line executes, no errors are generated, yet Firebug doesn't show that the value attribute of el has changed. I tried the following as well, but no luck:

$(el).val($(el).val()); 

The reason I'm trying to do this is to preserve the values in the text boxes when I append new content to a container using jTemplates. The old content is saved in a variable and then prepended to the container. However, all the values that were entered into the text boxes get lost

var des_cntr = $("#pnlDesignations");
    old = des_cntr.html();
    des_cntr.setTemplate( $("#tplDesignations").html() );
    des_cntr.processTemplate({ 
                                Code: code, 
                                Value: val,
                                DivisionCode: div,
                                Amount: 0.00
                            });
    des_cntr.prepend(old);

This is the template:

<div id="pnlDesignations">
    <script type="text/html" id="tplDesignations">
        <div>
           <label>{$T.Value} $</label>
           <input type="text" value="{$T.Amount}" />
           <button>Remove</button>
           <input type="hidden" name="code" value="{$T.Code}" />
           <input type="hidden" name="div"  value="{$T.DivisionCode}" />
        </div>
    </script>
</div>

Answer 1

You want to save the previous value and use in the next change event?

This example uses .data to save the previous value. See on jsFiddle.

$("input").change(function(){
    var $this = $(this);

    var prev = $this.data("prev"); // first time is undefined

    alert("Prev: " + prev + "\nNow: " + $this.val());

    $this.data("prev", $this.val()); // save current value
});

jQuery .data