How to edit data onclick

Question

I am not sure what it is called, but I want to be able to click on e.g. a div containing a number, and then it will change into a input text field, with the val

Answer 1

You can do the following:

Have a click event and create a textbox on the fly which takes the text inside the div as a value.

The have a blur even which binds to that textbox and makes an AJAX call and in its success change the div text

Lets say your HTML is like:

Amazing Spider man

And your JS code will be like:

$('#fullname').click(function(){
    var name = $(this).text();
    $(this).html('');
    $('')
        .attr({
            'type': 'text',
            'name': 'fname',
            'id': 'txt_fullname',
            'size': '30',
            'value': name
        })
        .appendTo('#fullname');
    $('#txt_fullname').focus();
});

$(document).on('blur','#txt_fullname', function(){
    var name = $(this).val();
    $.ajax({
      type: 'post',
      url: 'change-name.xhr?name=' + name,
      success: function(){
        $('#fullname').text(name);
      }
    });
});

This is demostrated in this jsfiddle