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

HTML5 has a contentEditable attribute with pretty good browser support, so you may want to explore this first if it aligns with your situation and if you want to do no-jquery. Simply putting contentEditable="true" in a div will make it clickable and editable (basic text).

To make practical use of the editable element, you'll need to use JS to watch the element and trigger an action when there's input. In the OP's case, in JS they would place the newly-edited content somewhere (like an array) ready for an ajax function to send it out to an external database. More info here and here.

Also, here's a plugin that takes it further and gives more WYSIWYG controls for these fields.

Anyways, here's a sample code, no plugins, no jquery:

var myEditableElement = document.getElementById('myContent');
myEditableElement.addEventListener('input', function() {
    console.log('An edit input has been detected');
    console.log(myEditableElement.innerHTML);
});

This is an editable element. Click and type something!