how to make fields readonly using java script


  • hi



    how to make the richtext editor and people picker fields read only in Editform.aspx page of a list ,through javascript





    can any one guide me regarding this

    Tuesday, June 03, 2008 12:35 PM


All replies

  • The following blog post contains javascript that can be used to find specific html elements in a sharepoint page and manipulate them; http://www.the-north.com/sharepoint/post/Mutli-lingual-Page-Layout-Text-for-Site-Variations.aspx


    If you modify that JS to disable the elements you want it should achieve what you're after.

    Tuesday, June 03, 2008 3:57 PM
  • Tuesday, June 03, 2008 7:22 PM
  • I should also mention, I experimented with using javascript to secure fields at the behest of a client

    last year. You can get it to work, but it's extremely easy to circumvent. The choice is yours, but I wouldn't use it for anything critical if I were you.

    Wednesday, June 04, 2008 9:42 AM
  • First ,you should open the Editform.aspx page in the Microsoft SharePoint Designer 2007,then in the code view add the JavaScript code.

    In the code ,you must search for the rich text in a specific element use the function of : document.getElementsByTagName(),

    When located the rich text, you can set the property of the rich text’s disable is true, then the rich text will be read only.


    Friday, June 06, 2008 6:21 AM
  • "When located the rich text, you can set the property of the rich text’s disable is true, then the rich text will be read only. "


    make the field gray but is possible to write in the field.

    Tuesday, March 09, 2010 10:37 AM
  • Hey All,

    I know this post is way after the fact, but since so many people come to these forums to find answers I thought I add it anyway.  In addition to all the fine advice already offered here I'd like to add some actual JavaScript code to help folks get up to speed quickly.  Here is the code:

    <script language="javascript">

    //This runs the function when the form first loads

    function lockFields()

     //This will return the proper form element

      var theInputTitle = getTagFromIdentifierAndTitle("Input","TextField","Title");

     //This line can be removed from the production code - it just displays the returned element's value 

      alert(" Title: " + theInputTitle.value);

      //This is the key line - it disables the form element

      theInputTitle.disabled = true;

      //You can also use the following:  theInputTitle.readOnly = true;  This sometimes behaves better then .disabled

      function getTagFromIdentifierAndTitle(tagName, identifier, title)
        var len = identifier.length;
        var tags = document.getElementsByTagName(tagName);
        for (var i=0; i < tags.length; i++)
           var tempString = tags[i].id;
           if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
             return tags[i];
        return null;


    I hope that helps!

    Tom Molskow SharePoint Architect
    • Proposed as answer by Tom Molskow Thursday, August 05, 2010 1:51 PM
    • Edited by Tom Molskow Thursday, August 05, 2010 7:29 PM slight change
    • Unproposed as answer by Mike Walsh FIN Wednesday, June 22, 2011 6:26 AM
    Thursday, August 05, 2010 1:51 PM
  • To disable the People picker control was much harder, but just in case anyone comes back here looking for the code.....

    (Thanks to sympmarc at the SPServices project on codeplex for setting me off in the right direction)

    Hope this helps someone, 

    Regards, Ruth

    // put this next line in document ready or use _spBodyOnLoadFunctionNames.push("hideReqAuth");
    // I had 2 fields to hide, so I need to find them then hunt 
    // through the HTML tags to disable the correct pieces
    function hideReqAuth() {
    	var searchText = RegExp("FieldName=\"Business Requester\"", "gi");
    	var searchText2 = RegExp("FieldName=\"Business Authoriser\"", "gi");
    	//alert(searchText); //uncomment to check
    	// Loop through all of the ms-formbody table cells
    	$("td.ms-formbody").each(function() {
    	   // Check for the right comment
    	   if(searchText.test($(this).html()) ) {
    	     $(this).find("a[Title='Check Names']").click();
    	     $(this).find("div[Title='People Picker']").attr("disabled", "disabled");
    	     $(this).find("a[Title='Browse']").attr("onclick", "");
    	   if(searchText2.test($(this).html()) ) {
    	     $(this).find("a[Title='Check Names']").click();
    	     $(this).find("div[Title='People Picker']").attr("disabled", "disabled");
    	     $(this).find("a[Title='Browse']").attr("onclick", "");
    	     return false;

    Ruth, UK
    • Proposed as answer by Ruth J Tuesday, December 14, 2010 5:07 PM
    • Unproposed as answer by Mike Walsh FIN Wednesday, June 22, 2011 6:26 AM
    Thursday, November 25, 2010 5:00 PM
  • Hey Ruth,

    That's great code - thanks for sharing that!

    Here's what else I have found:

    •To find the People Picker using the Javascript getTagFromIdentifierAndTitle function the code below:

    var assignedToInput = getTagFromIdentifierAndTitle("Textarea","UserField_downlevelTextBox","People Picker");

    •To disable the people picker (in this case by hiding the control all together) use this code below:

    •To enable just change the "none" to ""

    I hope that helps!


    Tom Molskow - SharePoint Architect - Linked-In - SharePoint Gypsy
    Wednesday, January 26, 2011 2:33 AM