Make a Text field read only on EditForm.aspx without SPD

June 2nd, 2009

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 (Tags: , , , )
2 Comments »

2 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!

Leave a Reply