How to make a field in a SharePoint Edit form readonly

Paul Galvin showed how to hide a field in a SharePoint. I wanted to use this code to make a field “read only” once a from has been submitted. Forgetting about DataSheet view (for now), we can put a Content Editor Webpart on the top of the EditFrom.aspx page (to add a CEWP to the top of the edit from, append the URL to this -> EditForm.aspx?ToolPaneView=2) and include his code:

$('tr:has(input[title=Disclaimer])').not('tr:has(tr)').hide();

This will hide the filed based on the Column Name (Disclaimer). Taking this a step further, we can get the selected value (a drop down box in this case), and append a column after the hidden column with some formatting, a column name and the selected value. Effectively making the column readonly.

<script type="text/javascript">
$(document).ready(function(){
$('tr:has(select[title=Disclaimer])').not('tr:has(tr)').hide();
$('tr:has(select[title=Disclaimer])').not('tr:has(tr)').append( '<tr><td nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">Disclaimer Accepted:</H3></TD><td valign="top" class="ms-formbody" width="400px">'+$('select[title=Disclaimer] :selected').text()+'</td></tr>');
});
</script>

,

10 Responses to How to make a field in a SharePoint Edit form readonly

  1. arash.gh September 24, 2011 at 9:18 am #

    hello.where should i enter this code?

  2. jbmurphy September 26, 2011 at 10:03 am #

    You need to add a content editor webpart. “. . . to add a CEWP to the top of the edit from, append the URL to this -> EditForm.aspx?ToolPaneView=2″. Here is an overview on how to add a CEWP:
    http://www.sharepointjoel.com/Lists/Posts/Post.aspx?ID=178

  3. F_Klim June 26, 2012 at 7:03 am #

    have gotten the code to work but is there any simple change which will get the code to work for radio buttons, check boxes, multi line text fields etc ??

  4. jbmurphy June 28, 2012 at 3:15 pm #

    I have moved to hiding the row based on the “field name” – the text to the left of the input box:

    $('nobr:contains("Your Filed Name")').closest('tr').hide();
    

    Then you can put anything after it like:

    $('nobr:contains("Your Filed Name")').closest('tr').after('<tr><td nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader">Your Filed Name</H3></TD><td valign="top" class="ms-formbody" width="400px">'+$('nobr:contains("Your Filed Name")').closest('input').text()+'</td></tr>');
    
  5. AKilgo July 26, 2012 at 11:06 am #

    Thanks for the great code! This has been VERY helpful to me.

    Can you give me one tip, however? I’m using the following code, adapted from yours, to display a column in read-only mode, but it is displaying BOTH the column title and the column contents where only the contents should be. Do you have any ideas on how I could fix this? Here’s the code:

    $(document).ready(function(){
    $(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).append(‘System Messages’+$(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).text()+”);
    });

  6. AKilgo July 26, 2012 at 11:09 am #

    Jeff, some of the code got cut off in my last post….. here’s the complete script.

    $(document).ready(function(){
    $(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).hide();
    $(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).append(‘System Messages’+$(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).text()+”);
    });

  7. jbmurphy July 26, 2012 at 11:14 am #

    try “after” instead of “append”. I believe append is just adding it to the hidden row. I had to start using after and before.

    $(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).after(‘System Messages’+$(‘nobr:contains(“SystemMessages”)’).closest(‘tr’).text()+”);
    });
    
  8. Gene March 8, 2013 at 12:46 pm #

    Hi,

    Nice code. One issue. When I edit an item and save it, it will wipe out the “disclaimer” field making it empty.

  9. jbmurphy March 11, 2013 at 4:56 pm #

    I usually hack up the edit page to keep things right.

  10. AbuBenAdam July 27, 2013 at 3:06 pm #

    There are many ways to make Read only fields in SharePoint:

    1. Using PowerShell to set SharePoint column read only.

    2. Using jQuery/Javascript to make read only fields

    3. Using SharePoint Designer to make SharePoint list field read only.

    http://www.sharepointdiary.com/2013/07/how-to-make-sharepoint-list-column-form-field-read-only.html#ixzz2aH3rfo00

Leave a Reply