Making HTML elements editable after a click of a button and save on the database

Question

I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:

<div class='wrapper'>
    <div class='topinfobar'>
    <p>Contact Info</p>
    </div>
    <table>
    <tbody>
    <tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
    <tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
    <tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9@gmail.com</p></td>
    </tbody>
    </table>
    <button>Change</button>
</div>

I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it

Answer 1

You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.

 $('#edit').click(function(){ $('#form').toggleClass('view'); $('input').each(function(){ var inp = $(this); if (inp.attr('readonly')) { inp.removeAttr('readonly'); } else { inp.attr('readonly', 'readonly'); } }); }); 

 .view input { border:0; background:0; outline:none !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='topinfobar'> <p>Contact Info</p> </div> <table id="form" class="view"> <tbody> <tr> <td> <p class='leftspacing'>Cellphone Numbers</p> </td> <td> <p><input type="text" value="072 215 3372" readonly/></p> </td> </tr> <tr> <td> <p class='leftspacing'>Phone Numbers</p> </td> <td> <p><input type="text" value="011 310 9967" readonly/></p> </td> </tr> <tr> <td> <p class='leftspacing'>email address</p> </td> <td> <p><input type="email" value="s.nyama9@gmail.com" readonly/></p> </td> </tr> </tbody> </table> <button id="edit">Change</button> 

Answer 2

There are a number of different ways you can do this, but the "classical" way would be to put the values in <input/> tags with IDs that are styled to be transparent. Wrap the whole table in a form, then use JavaScript when the user clicks the button to remove a disabled property from each of the input fields and change the button label. The second click of the button would then be validation and/or a form submit. The easiest way to keep track of which is the first and second click would be to compare text, but you might want to just set a variable on the element instead. Try here for a good starting point on pure-Javascript form submission or here for JQuery. This is a Stack-Overflow question about making input fields transparent.