1) you add buttons for each field (or better, direct clicking on field): <div class='editableField'><span>Some text to edit</span></div>
2) On field click, hide text and applie input field
$('.editableField').click(function(){
$(this).append('<input type="text" value="'+$('span', this).text()+'" class="editableInput"/>');
$('span', this).remove(); // remove this span temporary
});
3) When .editableInput
focus, use ajax call to save field values:
$(document).on('focusOut', '.editableInput', function(){
$.ajax({
url: 'example.com/saveFieldValues.php',
type: 'post',
data: {fieldValue: $(this).val()},
success: function(){
$(this).parent().append('<span>'+$(this).val()+'</span>'); // return back old span element
$(this).remove(); // remove unnecessary input field
}
});
});