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?

refer http://stackoverflow.com/questions/5729552/is-there-a-way-for-me-to-make-an-input-field-non-editable — Ankur, Sep 03 '12 at 18:32
This is an extremely vague question. You might stand a better chance of getting a suitable answer if you show us what you've tried already, or what markup you want to move towards. The basics of the answer is to have a button which toggles the "readonly" state of all form elements when clicked. — Matt, Sep 03 '12 at 18:33
I haven't tried anything yet. I like to do my research before I waste any time on a bad solution.. Robin managed to give me the answer I was looking for. And btw, read only state of an input does not equal a label.. — ffffff01, Sep 03 '12 at 18:40

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

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 -

Always render in edit mode by default
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).

edited May 23 '17 at 12:20

Community

1
1

answered Sep 03 '12 at 18:33

Robin Maben

19,662
16
61
93

Thanks, Robin! Just what I was looking for. Didn't know what to search for, but now I know :) – ffffff01 Sep 03 '12 at 18:40
@f01: You're welcome :-) **Note:** It gets trickier for `select` elements. But not to worry there are many answers on SO for that! – Robin Maben Sep 03 '12 at 18:47

Implement read / edit mode in form

1 Answers1

Linked