Using Javascript to Manipulate a List Form Field Title

October 12th, 2007 by Dor

Lets say you want to change the text of a field title in a new item form, or in an edit-item form. You might want to do one of the following:

  • Change the field title text
  • Add a remark to the title
  • Add a link
  • Make the title a link
  • Put some javascript

The trick in doing this is also not breaking the Form Web Part, so new fields will appear in the form.

The solution is… Javascript at runtime! It’s inspired by this post for changing the default value of a field, only this time we’re talking about the title text and not the field value.

So how to do it? Easily. Open the NewForm page with SharePoint Designer and view the HTML code. Look for the main content placeholder:

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

Paste this code inside it, before the table:

<!– Begin Field Link Code –>
<script type=”text/javascript”>
// Add the function so it will be called on Body_OnLoad.

function AddFieldLinks()
  // Call the search function with an anonymous function that will 
// be executed upon finding the relevant field.
AddFieldLink(“Status”, // This anonymous function adds a link to the field’s title. function (currentText) { return currentText + “<br/>” +
GenerateLink(“policy.html”, “<u>See Status Policy Document</u>”); } ); } function GenerateLink(url, text) { return “<a target=\”_blank\” href=\”" + url + “\”>” + text + “</a>”; } function AddFieldLink(fieldName, fn) { // Get all field titles var tags = document.getElementsByTagName(“H3″); // Go through all field titles and search for the requested field. for(var i=0; i < tags.length; i++) { if((tags[i].children.length == 1) &&
(tags[i].className == “ms-standardheader”) && ((tags[i].children[0].innerText == fieldName) ||
(tags[i].children[0].innerText == fieldName + ” *”))) { // Found the field we need to update. Set its tags[i].children[0].innerHTML = fn(tags[i].children[0].innerHTML); break; } } } </script> <!– End Field Link Code –>

Now just edit the body of the AddFieldLinks function to change the title of the relevant fields.

It’s parameters are:

  • The title of the field
  • A function that returns a string for the title.
    Notice that I used an anonymous function so you can set a different behavior for each field title - for example, one will be a link, the other would be appended some text, etc…

Now just save the file, approve the unghosting, and that’s it! Smile

Here’s the result - click to enlarge:
click me!


Posted in English Posts, WSSv3 | No Comments » Javascript to Manipulate a List Form Field Title digg:Using Javascript to Manipulate a List Form Field Title reddit:Using Javascript to Manipulate a List Form Field Title