Using javascript/jquery to modify the display form?

Question

I have a js file which retrieves a value stored in a date field and then calculates the remaining time in weeks/days. My issue is that this works on the edit form because I send the value in with MyColumn.val('value here'), but I have no clue where to begin doing the same thing on the display form.

I have two options:

1. Modifying the display so that the column would show:

Days Left: [my js result here]

2. Placing a line of text above the created/modified info at the bottom (preferred?) (Above here:

Which option would be easier to transfer using the existing code from the CEWP on the edit form?

Thank you!

Answer 1

In SharePoint 2010, the default display forms include an anchortag in the table rows with a name attribute of:

SPBookmark_YourFieldName

If you are using those default display forms, you can take advantage of this and locate your values using jQuery like the following. In this example, my date field is named 'SiteCreateDate':

// my example list field is named SiteCreateDate

// this will fetch the value:
var myDateValue = $('a[name*=SPBookmark_SiteCreateDate]').closest('tr').children().eq(1).text().trim();

// do your days left calculation here
myDateValue = myDaysLeftFunction(myDateValue);

// this will append a new tablerow below the initial date row with your new value
$('a[name=SPBookmark_SiteCreateDate]').closest('tr').after('<tr><td class="ms-formlabel"><h3 class="ms-standardheader">Days Left</h3></td><td class="ms-formbody">' + myDateValue + '</td></tr>');