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

  1. 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
  2. Add a Content Editor Web Part
  3. 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>
Filed in JavaScript, SharePoint 2007 (Tags: , , , )
8 Comments »

8 Responses to “Make a Text field read only on EditForm.aspx without SPD”

  1. Patrick Says:
    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

  2. Kit Says:
    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!

  3. Kit Menke's Blog » Blog Archive » Autopopulate a SharePoint Form from URL Says:
    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 [...]

  4. Robyn Says:
    August 4th, 2010 at 11:08 am

    Where do I get the prototype.js file?

  5. Kit Says:
    August 4th, 2010 at 11:11 am

    You can download prototype.js from http://www.prototypejs.org/.

  6. Peter Says:
    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

  7. Kit Says:
    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

  8. Peter Says:
    August 22nd, 2010 at 8:48 pm

    Thanks Kit

Leave a Reply