Question

How can I save and restore all values of Input controls that putted in a DIV using jQuery ?
should I use jQuery Serialize API ?

For example there are three input controls in below DIV , How to Store and restore values using jQuery?

<Div Id=Test>
<table >
    <tr>

        <td>
            Name
        </td>
        <td>
            <input name="WebUserControl1$TextBox1" type="text" id="TextBox1" />
        </td>
    </tr>
    <tr>
        <td>

            Family
        </td>
        <td>
            <input name="WebUserControl1$TextBox2" type="text" id="TextBox2" />
        </td>
    </tr>
    <tr>
        <td>
            age
        </td>

        <td>
            <input name="WebUserControl1$TextBox3" type="text" id="TextBox3" />
        </td>
    </tr>

</table>
</Div>

Answer 1

You can use jquery data attribute to store the value specific to dom elements like this.

$("divSelector").data("myData", "data");

To retreive it you have to say

$("divSelector").data("myData");//It will give "data"

Try this

var inputObj = {}, $this;

$("#Test input").each(function(){
  $this = $(this);
  inputObj[$this.id] = $this.val();
});

//This will store the object we created above in Test data attribute.
$("#Test").data("inputControls", inputObj);