A question on Stack Overflow made me remember some code I wrote a few years ago. It allows you switch a form between regular edit mode and read mode, without having to reload the page. It works just like you are used to in the Notes client. So I thought I would post it here on my blog as well.
It is not very complicated. I am using jQuery, but you can of course use plain Javascript if you like. What the code does is to locate all INPUT fields you want to make read-only. It then creates a regular DIV element and set the content of it to the value of the INPUT field. The id and a couple of other attributes are also copied over, then the new DIV is inserted in front of the INPUT field. Finally the INPUT field is deleted.
To make the DIV editable again, the same process is done in reverse.
Below is the jQuery code to make all elements with the data-attribute dominofield read-only. I am using this data-attribute to map input fields to fields in a Domino database. It makes it very easy to create HTML forms and submit them to a Domino database, with one generic agent that will process the Ajax call. The field names and values will be provided in the JSON payload, and the Domino document can then be created or updated and the fields populated with the proper values.
// Get all input fields used for Domino
var inputs = $('[data-dominofield]');
// Process each field
inputs.each(function() {
// Build new DIV element
var input = $(this);
var div = '<div class="fieldReadOnly" ';
div += 'data-dominofield="' + input.data('dominofield') + '" ';
div += 'id="' + input.attr('id') + '">';
div += input.val() + '</div>';
// Insert ther new div element in front of input field
input.before(div);
// Remove input field
input.remove();
});
I also created a fiddle where you can test it yourself.
If you are using Bootstrap, you can also use the readonly attribute and the class .form-control-plaintext to get the same result. This is documented here.
