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>
Comments
10 responses to “How to make a field in a SharePoint Edit form readonly”
hello.where should i enter this code?
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
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 ??
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>');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()+”);
});
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()+”);
});
try “after” instead of “append”. I believe append is just adding it to the hidden row. I had to start using after and before.
Hi,
Nice code. One issue. When I edit an item and save it, it will wipe out the “disclaimer” field making it empty.
I usually hack up the edit page to keep things right.
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