I am currently busy working with an `web-service` with `ajax/json`.

I am retrieving all `values`, but now I would like the user to update their details.

I would like to know, how can I change an input field's `value="?"` to the text that the user is currently typing (in real-time)?

What I do is, I populate the labels with actual data that I am retrieving using the web-service.

When you click `'Update Details'`, my `jQuery` code will change the labels to input fields, only problem now is that I would like to populate the user text as he types, grab these values and send it back to the web-service.

Here is my code. (The form)

```
<form>
        <table class="table AccountDetails">
            <tr>
                <td>Account holder:</td>
                <td><label id="AccountHolder" class="editable"></label></td>
            </tr>
            <tr>
                <td>Primary email:</td>
                <td><label id="PrimaryEmail" class="editable"></label></td>
            </tr>
            <tr>
                <td>Contact number:</td>
                <td><label id="ContactNumber" class="editable"></label></td>
            </tr>
            <tr>
                <td>Terms and conditions:</td>
                <td>
                    <table>
                        <tr>
                            <td><label id="TCs" class="editable"></label></td>
                            <td>&nbsp;<label id="TCsDateAccepted"></label></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <a class="btn btn-default" id="updateDetails" href="#">Update Details</a>
                </td>
                <td align="right"><a class="btn btn-default" href="#">Review T&amp;C's</a></td>
            </tr>
        </table>
</form>

```

Here is my jQuery code:

$("#updateDetails").click(function() {
 var $this = $(this);

```
if($this.attr('editing') != '1') {
    $this.attr('editing', 1);
    $(document).find('.editable').each(function() {
        var input = $('<input class="editing" value="'+$(this).text()+'" />');
        //input.val($(this).text());
        $(this).replaceWith(input);
        console.log( $(input).val());
    });
}
else {
    $this.removeAttr('editing');
    $(document).find('input.editing').each(function() {
        var div = $('<div class="editable" />').text($(this).val());
        console.log( $('.editing').val());
        $(this).replaceWith(div);
    });
}

```

});

I do hope I am making sense here.
Please ask if anything is unclear.