Implement read / edit mode in form

Question

I am implementing a form that has two states. Read only mode where a user can read information from labels with information like name, age, address and so on.. In addition to this I want an edit mode where the user can edit the information.

Standard view should be read-only mode, and when the user clicks edit I want the labels to change to textboxes and be editable.

Whats the best way to implement this with the use of html, css and jquery?

Answer 1

What you're looking for is called "in-place editing". Don't waste time re-inventing the wheel. :)

---

But just for a quick idea I'll post a short snippet to get you started -

1. Always render in edit mode by default
2. Make readonly if required - as follows

---

 <form data-mode="read">
    <input value="Hello" />
 </form>

if($('form').data('mode') == 'read'){   //remove fields and add text
  $('form').find(':input').each(function(){
     $(this).replaceWith($('<span>' + $(this).val() + '</span>');
  });
 }

Note: Instead of replacing with labels you can disable them instead using .prop('disabled', true).