How can JavaScript’ers create custom EditForm without understanding CAML and .NET !

By | July 31, 2006

(This articles has already been posted in Now I post it again in my own blog.)

SharePoint 2003 has come with very easy user interface and many automated (template) form. You can leave traditional way of creating new table and corresponding form entry to SharePoint. Table, folder or files in traditional web application, are replaced by ‘cross-handling’ list in SharePoint as well as the corresponding template forms. For example creating new CustomEdit List will virtually add several template forms (AllItems.aspx, DipForm.aspx, EditForm.aspx, and NewForm.aspx) (Figure – 1)


Figure – 1. New empty list with corresponding template form

Those forms are automatic, virtual and customized for any fields in our list. SharePoint has made our life ‘easier’ but it also mean lessen our control for any business process we might have.


Figure – 2. Default EditForm.aspx

A very typical question is “How can we customize EditForm.aspx ?” (Figure -2). Following tips is JavaScript’ers tactical which will show basic idea for easy customization of template forms.

What does SDK say?
The SDK explains how to create new custom list definition. Of course, for anyone who understands the CAML (which construct SCHEMA.XML and ONET.XML) it won’t be a problem, but what about for those who doesn’t understand or new to CAML? The problem for the CAML is ” it is lack of information” and “still few samples”.

So what is the solution? Should we learn and understand CAML to customize the EditForm.aspx? No. My answer for that question is: Use JavaScript !

Why? Because SharePoint2003 is actually armored with JavaScript. And it is generally known by many web developers (at least the <SCRIPT language=”JavaScript”> tag is very common to see) .

How can JavaScript help us?
Remember that every JavaScript enabled browser will handle all HTML document in its document model. By doing some tricky method to this document, we can do almost everything as it is done by SharePoint !
Then how can we do it? Remember this 3 simple guidance:
1. Find the field you want modify and enclosed with the <DIV>. Don’t forget to give custom ID for the new DIV.
2. Grab any information you want to parse from the <DIV>.
3. Create new custom display for that field by modifying the .innerHTML property of the <DIV>.

Ok. I hope you remember those three things above for your weapons. Now let us try to modify EditForm.aspx for our CustomEdit list. We are going to make ReadOnly field become read-only.

Create a new “CustomEdit” list and modify the EditForm.aspx to make the “ReadOnly Name” read-only.
1. Create custom list and name it “CustomEdit.”
2. Add 2 fields, “ReadOnly Field” and “Editable Field.” Default EditForm.aspx should be like figure-2.
3. Open EditForm.aspx for “CustomEdit” list using FrontPage 2003
4. In the design pane, right click the form and choose “Customize Sharepoint List Form” (figure-3)


Figure – 3. EditForm.aspx in FrontPage. Click Customize Sharepoint List Form !

5. Enclose the “ReadOnly Field” edittext box with DIV

<DIV id="ReadOnly1">
[Original text box entries]
</DIV >


Figure – 4. EditForm.aspx in FrontPage code view

6. On top of enclosing body </BODY> the create new <SCRIPT language=”Javascript”> processing tags, add scripts to modify the field. (Enclosed scripts is for this div)

<script language="javascript">
var myObj = document.getElementById("ReadOnly1");
s = myObj.innerHTML.indexOf("<INPUT");
e = myObj.innerHTML.indexOf(">",s+1);
var InputTag = myObj.innerHTML.substr(s,e-s+1);
s = InputTag .indexOf("value=");
e = InputTag.indexOf("\"",s+7);
var InputValue = InputTag.substr(s+7,e-s-7);

newDivContent = InputValue ;
newDivContent += "<Div style=\"display:none\">" + InputTag
newDivContent += "</DIV>";
myObj.innerHTML = newDivContent;

7. Save and try to open EditForm.aspx from default links. (Figure – 5);


Figure – 5. Custom EditForm.aspx in browser

Now you have made a nice custom EditForm without making a new custom List. Of course this method is valid for any form in SharePoint. The techniques above can be easily applied into any implementation.

24 thoughts on “How can JavaScript’ers create custom EditForm without understanding CAML and .NET !

  1. Narendar Kumar

    Couldn’t be the right solution to make a cell(row) read only

  2. cakriwut

    To. Narendar Kumar:
    Can you elaborate more? ie. “to make a cell(row) read only”.
    What do you wish to do?

    The article only showing how to modify editform and newform aspx – so we can protect uneditable field. If you need to create readonly cell, then other technique applies. So, please elaborate your comment.

  3. Dennis Goedegebuure

    At first when I copied the Javascript from this site it didn’t work either in my environment. But then I noticed the code was a different color and not valid.

    If you copy the code from the example above you will get the right double quotation marks and the left double quotation marks along with it.

    When I replaced them with regular quotation marks it all worked just fine.

  4. Cakriwut

    Sharepoint Designer 2007 is the next version of frontpage 2003. Doing above tasks to edit WSS 2.0 – using SD2007 or FP2003 are basically same.

  5. Marc

    Very cumbersome!

    The code I came up with was two lines and didn’t require amending the existing page. Simply find the existing fieldpost, call .insertAdjacentHTML then (second line) hide the original post.

    You should also handle any changes to the original field, incase other JS code on the page wants to change that field for some reason.

  6. Adrian

    I have been trying your example many times but couldn’t make it work. I always get errors such as “One of the properties of the Web Part has an incorrect format. Windows SharePoint Services cannot deserialize the Web Part. Check the format of the properties and try again.” I am not sure where to put the and tags. Could you expand Figure 4?

  7. Soujanya

    Can I follow the method for SharePoint Server 2007 Beta edition to make a field in my list Readonly, or is there any other method like adding some JavaScript in my .CS file I mean in my front page.
    My task is almost same, here I explain the task, I have an SPListItem named “EmpName”, where this field will be automatically populated by the logged-in user name, when the user try to add a new Item to the List, now I need to make this EmpName field disabled from editing, as this field is automatically getting populated by the logged-in user name.
    Can I get any help how I can achieve this.
    Greatful if any one can help in this.
    awaiting for the help and solution.

  8. Cakriwut

    For any list item, there is mandatory field “Created By” and “Modified By”. For your case, I suggest to use “Created By” field. If you want to put it into other “EmpName” field, then; make a calculated field “EmpName” which copies text from “Created By”.

  9. Soujanya

    Thank you cakriwut,
    I am sorry I did not understand, why I need to deal with the “Created By” or “Modified By”, when I want to make one of my SPField ReadOnly, I got one of the solutions to be dealing with the EditFrom.aspx as you explained about, but is there any other way of achieving it.
    Can I do it by customizing the existing files like onet.xml or schema.xml or any other. And adding them to the Site Definition or List definition.
    Hope you got what I am trying to explain and I will be very glad if I can any help furthur. And please also let me know if I can achieve it using some Javascript.

  10. Soujanya

    Cakriwut please make a note that I am working in SharePoint 2007 beta version.

  11. Guy

    There is cake way to make SharePoint fields read only. There’s already a tag that does it for you. Look at the tag above Modified Date and Created by Date. This tag already changes edit fields to read only. You simply move the tag up the list as far as you want.

  12. Adrian

    Thanks Guy thats just the trick and so easy, i placed a copys of the tag above and below the fileds i wanted readonly


  13. Yuri

    Nice trick! Very useful!!!

    comment: for some reason, the “value=”blablalba”” attribute in the input field does not have quotes on my portal. So i modified the value-searching part of the script to:
    s = InputTag.indexOf(“value=”);
    e = InputTag.indexOf(“name=”,s+6)-1;
    var InputValue = InputTag.substr(s+6,e-s-6);

    now it works correctly.

  14. Arun

    Hi Soujanya:

    How did u get the reference to the logged in user name in ur spsfield item is it through =Me

    if then that gives u only the something like Domain\username

    how do u get the firstname and lastname of the logged in user

  15. Ferdi


    I cannot see my custom form in Sharepoint Designer 2007? – I just see a form with three fields “Column Name 1; Column Name 2 and Column Name 3”

    How do I view my custom form and its code?

  16. congr

    how to make field readonly in when Edit in Datasheet any idea?

  17. Helen Eriksson


    Since the function in FrontPage 2003 “Customize SharePoint List Form” not is valiable in SharePoint Designer 2007 (not that I’ve notice anyway) I need to know how to make a field read-only?!

    My list in SharePoint is a customized list with errends, and when att choose to create a new errend my field “Errendtype” needs to be read-only and with a defualt value.

  18. Pingback: I need to supplement a choice domain to sharepoint that has values depending on a tide selection - Zumbach Gyan

  19. Pingback: I need to supplement a choice domain to sharepoint that has values depending on a tide selection | Ziak

Leave a Reply