Bootstrap Jquery/Ajax Inline Edit when clicking Edit button

Question

Can some one suggest me an inline edit were when I click on the edit button my label content should be replaced with an input text and I would be able to update it in my mysql db.

My code:

<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>

Any help would be appreciated Thanks!!

Answer 1

I would probably just use contentEditable, if possible.

 document.addEventListener('DOMContentLoaded', function(){ var btn = document.getElementById("editButton"); btn.addEventListener("click", function(){ var editLabel = document.getElementById("editLabel"); editLabel.contentEditable = true; editLabel.className = "editActive"; }); }); 

 #editLabel{ margin-bottom: 25px; display: inline-block; padding: 5px; box-sizing: border-box; } #editButton{ display: block; } .editActive{ border: 1px inset #e3e3e3; cursor: text; } 

 <label id="editLabel">Hello World</label> <button id="editButton">Edit Label</button> 

Answer 2

I wouldn't recommend doing it inline. As you can see the result will not be clean. This will work though.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <label style="display:block;">mylabel</label> <input type="text" style="display:none;" value="myInput"> <button onclick="$('label').text($('input').val())">edit</button>