Input field value in real time changes as custom types
I am currently busy working web-service
with ajax/json
.
I am fetching everything values
, but now I want the user to update their data.
I would like to know how to change the input field value="?"
to the text the user is currently entering (in real time)?
What I do is I populate the labels with the actual data that I retrieve using the web service.
When you click 'Update Details'
, my code jQuery
will change the labels to input fields, the only problem is I would like to fill in the user's text as they enter, grab those values and send them back to the internet 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> <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&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 hope I make sense. Please ask if something is clear.
source to share
As I understand it, you want the input and some text to update as 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's a little fiddle: http://jsbin.com/luzidaro/1/edit
source to share