Make a Text field read only on EditForm.aspx without SPD
June 2nd, 2009
 |
November 10, 2010 Update: I’ve posted the sequel to this post: Autopopulate a SharePoint Form from URL (with SPUtility.js). I’ll leave the original intact just in case someone wants it, but I would highly recommend checking out the new and improved way using SPUtility.js! |
|
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>
<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>
<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
August 4th, 2011 at 6:47 am
This one is good.
Actually my question is how we can use SPUtility in Custom List Forms?
In Custom List forms we are not have SPField Value. Can you please suggest
me on this?
August 4th, 2011 at 7:35 am
A custom list form created using SharePoint Designer? SPUtility.js doesn’t (yet) work on those forms because of the way it looks up the fields (depends on the rigid form structure). The library needs modifications to be able to work with those forms.
I put it on my SPUtility.js todo list. If you’re feeling adventurous, you could take a look at the code too.
August 4th, 2011 at 7:38 am
Hi peter,
Just for information… If you want to do it for Textarea, Choice Fields ..
then change the code a bit ..
For Textarea:
var inputs = $$(‘input[title="' + name + '"]‘);
to
var inputs = $$(‘textarea[title="' + name + '"]‘);
For ChoiceField:
var inputs = $$(‘input[title="' + name + '"]‘);
to
var inputs = $$(‘select[title="' + name + '"]‘);
But we don’t have any clue for person and group. But we can access this person and group class and make it as readonly. But it will effect in all the persona and group fields which are there in the form.
But if you are planning to go for Normal form instead of Custom List form then Kit given an excellent libarary to us (SPUtility.js). It works like charm !…
Kit we are very much thankful to you….
Thanks,
Rao…
August 4th, 2011 at 7:44 am
Hi Kit,
“A custom list form created using SharePoint Designer?”
- Yes.
Actually I did all my work with normal forms (and SPUtility). If in case my work is not going to satisfy with normal forms then I need to go for Custom List forms. That is why I’m trying SPUtility with Custom List.
Anyway I used your above concept for labeling the fields. I will use this concept ..
Thanks for quick response !….
-
Rao
August 4th, 2011 at 7:56 am
I want to add one more point to my last but one comment.
For the textarea – It should be plain text. If it is Rich rext or enhanced Rich text
then it is not going to convert it into label / read-only.
Thanks,
Rao.
August 30th, 2011 at 1:04 am
[...] http://kitmenke.com/blog/2009/06/02/make-a-text-field-read-only-on-editformaspx-without-spd/ [...]
September 8th, 2011 at 4:00 pm
Can this work for number field? Thanks.
September 11th, 2011 at 4:23 pm
Rui,
Take a look at http://sputility.codeplex.com/. It is my updated library that supports Number fields as well.
Thanks,
Kit