Make a Text field read only on EditForm.aspx without SPD
June 2nd, 2009
![]() |
August 20, 2010 Update: The code below has moved to be part of a bigger library… check out SPUtility.js on CodePlex! |
After looking at a couple of examples online, most of them require the use of SharePoint Designer to make a field read only (or to hide it). Here is a method to make a field readonly using only Prototype (javascript library) and a Content Editor Web Part
- Edit the EditForm.aspx page
If the Edit Page option is missing from the Site Actions menu, use the ToolPaneView=2 URL parameter.
Ex: /EditForm.aspx?ToolPaneView=2 - Add a Content Editor Web Part
- Add the following code (in this example, “Question” is the name of my field):
<script type="text/javascript" src="[YOURPATHTOPROTOTYPE]/prototype.js"></script>
<script type="text/javascript">
function SetReadOnly()
{
var inputs = $$('input[title="Question"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>
References:
Update after Patrick’s comment (below). Here is an updated version of the code if you want to use it for multiple fields. You can simply call SetTextFieldReadOnly for each text field you want to hide.
<script type="text/javascript" src="[YOURPATHTOPROTOTYPE]/prototype.js"></script>
<script type="text/javascript">
function SetTextFieldReadOnly(name)
{
var inputs = $$('input[title="' + name + '"]');
if (null != inputs && inputs.length == 1) {
var input = inputs[0];
var label = "<span>" + input.getValue() + "</span>";
Element.insert(input, {before: label});
input.hide();
}
}
function SetReadOnly()
{
SetTextFieldReadOnly('Title');
SetTextFieldReadOnly('Question');
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>


December 22nd, 2009 at 7:25 am
This works great. Thank you so much!
It even works for multiple fields by duplicating the block within SetReadOnly() and renaming inputs to input1, input2 etc.
Patrick
December 22nd, 2009 at 10:44 am
Patrick,
I updated my post so you won’t have to duplicate the entire block. You can just call the SetTextFieldReadOnly function over and over.
Thanks!
June 23rd, 2010 at 9:50 pm
[...] post builds off of my previous post about making fields read only. In this case, I needed to autopopulate the NewForm.aspx with a value [...]
August 4th, 2010 at 11:08 am
Where do I get the prototype.js file?
August 4th, 2010 at 11:11 am
You can download prototype.js from http://www.prototypejs.org/.
August 17th, 2010 at 2:53 pm
Hi Kit,
Is it possible to apply this script to fields other than text like “choice” or “person or group”?
Thank you in advance.
Peter
August 17th, 2010 at 10:20 pm
Peter,
This script won’t work with Choice or People fields. However, I am working on a library that should hopefully be able to handle both types of fields. I’ll keep you posted.
Thanks,
Kit
August 22nd, 2010 at 8:48 pm
Thanks Kit