Implementing the View/Edit Mode in form

Question

Our forms need to support the View/Edit mode. In the Edit mode all the fields are editable. In the View mode, they are read-only. Maybe there is a CSS style that can be applied, or maybe the Input Boxes can be converted to Labels.

FYI, our app is in Spring MVC, some ideas we've examined:

1. Extend Spring MVC's Form tags to support View/Edit from the server-side
2. Some JS/jQuery tweaks
3. Some CSS tweaks

I found a similar thread on this: Implement read / edit mode in form

 <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>');
  });
 }

The suggestion was to have a Form tag attribute, e.g. "data-mode", but is this a custom attribute?

What are some standard, good solutions to this problem, whether it's from the JS, CSS, or SpringMVC (server-side) point of view?

Answer 1

You could have the form with both. The inputs and the labels and show/hide them base on the form mode.

<div style"display:none">
Name: <input>
<div>
<div>
  Name: My Name 
<div>