Problem
I’ve got two pages with HTML forms on them. The submission form is on the first page, and the acknowledgement form is on the second. The first form gives you a lot of options, while the second page shows you the data from the submission form again, along with a confirmation message. All fields on the second form must be static.
Some form controls can be readonly, whereas all can be disabled, according to what I’ve seen. The distinction is that you can still tab to a readonly field.
Is there a method to label the entire form as readonly/disabled/static so that the user can’t change any of the controls instead of doing it field by field?
Asked by Mawg says reinstate Monica
Solution #1
Wrap the input fields and other elements in a fieldset> and set the disabled=”disabled” property to true.
Example (http://jsfiddle.net/7qGHN/):
Answered by Klemen Tusar
Solution #2
Then, since the OP did not specify that the specific “locked” form should be transmitted to the server, setting all form elements’ disabled properties to true would be a sensible option (which the disabled attribute does not allow).
Another option, as seen in the sample below, is to create a layer on top of the form element, which will prohibit any interaction with the form element’s elements because the layer has a higher z-index value:
Answered by vsync
Solution #3
This function can be used to disable the form:
function disableForm(formID){
$('#' + formID).children(':input').attr('disabled', 'disabled');
}
Click here to see a working demo.
It’s worth noting that it makes use of jQuery.
Answered by Sarfraz
Solution #4
Don’t place the material in editable controls on the confirmation page; instead, write it to the page.
Answered by Doobi
Solution #5
There isn’t a built-in mechanism to do this that I’m aware of, so depending on how complicated your form is, you’ll have to come up with a bespoke solution. This is a post you should read:
Toggle between read-only and read-write HTML forms. (Update: post link is no longer active; it has been archived.)
EDIT: Why are you so concerned about it being read-only, based on your update? You can do it client-side, but if you don’t, you’ll have to add the appropriate tag to each control or convert the data to raw text and display it without controls. If you want to make it read-only so that the next post will be unchanged, you’ll have a problem since anyone can tamper with the post and make it generate whatever they want, so once you have the data, double-check it to make sure it’s still legitimate.
Answered by Kelsey
Post is based on https://stackoverflow.com/questions/3507958/how-can-i-make-an-entire-html-form-readonly