Update table field without refresh?

Question

I have a "div" that brings the data of a table "Mysql", how do I do so when clicking on that "div" the data becomes editable ? But without going to another page.

<div id="nome_mysql">João</div>

By clicking John, the "div" would become an "input text", where I could change the name for another, and after making the exchange, the "input text" would return to being a normal "div" ?

Answer 1

When you say "by clicking this div the data becomes editable" you better have a input hidden that appears when you click on the div. So the value you edit is always on the page, even if the input be hidden.

Example:

var div = document.getElementById('nome_mysql');
var input = document.querySelector('input[nome="nome_mysql"]');
console.log(div, input)

function toggleElements(show, hide) {
    show.style.display = 'block';
    hide.style.display = 'none';
    show.focus();
}

div.addEventListener('click', function() {
    input.value = this.innerText;
    toggleElements(input, this);
});
input.addEventListener('blur', function() {
    div.innerText = this.value;
    toggleElements(div, this);
});

input[nome="nome_mysql"] {
    display: none;
}

<div id="nome_mysql">João</div>
<input type="text" nome="nome_mysql" />

jsFiddle: https://jsfiddle.net/pwy4zyrb/1/