Realtime input field value change as user types

Question

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.

Answer 1

As I understand you want an input and some text to update as the input updates. This might help you:

var $text = $('#text');
var $input = $('#input');
$input.on('keyup', function () {
  $text.html($input.val());
});

And with a little trick you can make it even more responsive:

var $text = $('#text');
var $input = $('#input');
$input.on('keydown', function () {
  setTimeout(function () {
    $text.html($input.val());
  }, 0); // On next loop
});

Here is a small fiddle: http://jsbin.com/luzidaro/1/edit