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

By Kit

November 10, 2010 Update: I’ve posted the sequel to this post: Autopopulate a SharePoint Form from URL (with SPUtility.js). The code below will not work in SharePoint 2013 so you should use SPUtility.js!

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">
function SetReadOnly()
{
  var inputs = $$('input[title="Question"]');
  if (null != inputs && inputs.length == 1) {
    var input = inputs[];
    var label = "" + input.getValue() + "";
    Element.insert(input, {before: label});
    input.hide();
  }
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>

References:

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">
function SetTextFieldReadOnly(name)
{
  var inputs = $$('input[title="' + name + '"]');
  if (null != inputs && inputs.length == 1) {
    var input = inputs[];
    var label = "" + input.getValue() + "";
    Element.insert(input, {before: label});
    input.hide();
  }
}
function SetReadOnly()
{
  SetTextFieldReadOnly('Title');
  SetTextFieldReadOnly('Question');
}
_spBodyOnLoadFunctionNames.push("SetReadOnly");
</script>