Convert HTML forms to read-only

Last summer I worked on a project. The project involved the development of 26 forms to collect some internal user information. Most of these forms are anywhere from 15-80 fields. Took us quite a while to get the kinks out of the system for the client.

This Spring the client approached us to make some modifications to the site. The want to categorize the data into annual sets of information. And the want to ‘lock-down’ previous year’s data when the year advances. What the client wanted was the form taken away but the information still displayed to the user as text. What we wanted to offer as a simple solution was to just disable the submit button on the forms. Though not the most elegant solution this did meet the client criteria. They have a very low budget and could not afford for us to add the needed backend code to display just the value. And frankly we didn’t want to start down the path of reworking each of these forms.

Another challenge is some of the form fields like the textareas contain many paragraphs of information. So even if we did just disable the submit buttons the user would have a hard time viewing the entered data. Not to mention if they wanted to actually print out the page for historical or to bring a copy to a meeting.

So I started thinking about the DOM. You know the Document Object Model. I remember reading an excellent article on ALA by Aaron Gustavson. I even remarked about in on ths blog, Better Printed Page Links. Seems to me that if Aaron can convert the links with the DOM for printing the I should also be able to do this with the form. Hmm.

My problem was this. I wanted to convert the form to read-only text when the page is loaded. Not printed. Though this would not be a big deal. Just a simple onLoad JavaScript call. Next to tackle the DOM.

To start I took a simple form that contains some input fields and a submit button. I start by wrapping a ‘div’ around the form. This will help when locating the form via the DOM. Note, I’m assuming in a real world situation the form will be on a page with other information and possibly even another form.

The DOM code to handle the ‘walking the form tree’ is pretty simple. We first use the handy function ‘getElementById()’. This will give us a reference point into the DOM at the start of the form. We pass the ID of the element we are looking form, the ID of the div we wrapped around the form earlier “myform”. From this reference I want all form INPUT elements. So another DOM function is used, root_form_ref.getElementsByTagName(“INPUT”). This this returned array I should be able to loop through and create a new element beside the visible form element. This new element is just a text node.

Take a look at the simple form 2 complete with proper JavaScript onLoad handling. As I wanted it the value of the text input fields is added to the DOM just after the original field location. I’m excited.

Next we want to add a little CSS to hide the real form input field and leave the new value only field. This seems simple enough and it is:

And that’s it for version one or the conversion. But what about more advanced form elements like radio buttons, select drop downs, text areas, etc? Good question. Let’s see how the code plays out for these.

I decided to tackle the textarea field first. My assumption was the textarea is similar in nature to the input. I decided to start another function. I also wanted to handle the treatment of the textarea value a little different. With the textarea form label on the screen next to the value it might be hard to distinguish the question from the answer. So I wanted to include a textarea value in a fieldset box. This should provide the needed separation. Take a look at the simple form 3

The select drop-down is my next victim. Again, I opted for a new function to handle this. Sure I could have used a single function for all but for ease of illustration wanted to keep the working code separate from the work in progress. The selects didn’t seem too difficult. Just as we did for the INPUT and TEXTAREA form items we call getElementsByTagName() to pull together all the selects. Then just a matter of looping through then items adding our text node. Also we add a new CSS rule to hide the form select from the users view. Simple stuff at this point really. Take a look at the simple form 4

Finally we come to the harder form items, radio and checkboxes. So what is so hard about these elements you ask. Accessing the form elements is not big trick. These are just input elements really. My first iteration of a solution was simply to replace the physical radio button with an ‘X’. This will allow the user to see the selection as well as the other options.

But I decided to keep working. Looking for a more elegant solution. I want to hide the non-selected radios and associated labels. The problem is the text associated with the radio/checkbox. Think about this. You have a set of radio buttons the user can select from. Like the following:

If the user selects the radio for ‘Male’ how do you access this ‘Male’ label with the radio selection? To handle this I wrapped the radio and label into tags. Then added some fancy JavaScript and through in a little CSS to handle the display or the non-selected radio buttons. I added code to my original ‘process_elements_input()’ since by definition the radio and checkbox form elements are INPUT types. Version 5 (and final) can be viewed here

Also you can download all the project files form_print_06042006.zip

I’m sure someone out in the land of DOM Scripting has come up with a better solution. I did search for something, anything. I found nothing that worked with simple HTML and JavaScript. Many other packages were more server-side processing modules. Didn’t need that.

Fell free to leave a reply below on any holes you may see in the code or suggestions on how to make this even more simple and elegant. This is my first pass at the development. I’m sure with someone else’s eyes the code can be improved.