Javascript Upload informations from button

Question

I am working on a recapitulative headband which is generated in php(phtml view file) like following :

echo    "<div>
        Nom : " . $this->currentP->getName() . "</br>
        " . "Version : " . $this->currentP->getVersion() . "</br>
        " . "Date de début : " . $this->currentP->getCreation_date() . "</br>
         ...
        </div>";

I want to have a little button (with an image) next to each field which highlight the current value of each field and allow user to directly change it witout submits etc... a kind of dynamic edition on a recapitulative dashboard. This will give the possibility of edit the objet which is presented without making pop a window or changing the current page.

I didn't found anything on the web, so I think this will be possible thanks to Javascript which I don't know a lot.

First of all, I don't know if I have to declare a link or a button to call the update function. Then, what happen next ?

Thanks for reading and your answer !

Answer 1

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 
       }
    });
});