Attaching JavaScript Events to SharePoint Form Controls

A project that I've been working on-again, off-again for the last year or so is finally about to be put into production. As a result, the people who have interests in the system have started making their requests (demands) for how to tweak the system to meet their needs. None of these requests have been anything unreasonable and I believe it's good practice to change your code to meet the needs of your users instead of trying to change your users to meet the needs of your code.

Because of these last-minute requests, I've had to come up with a couple cool tricks to "extend" the functionality of SharePoint. One fairly simple hack that has a lot of potential is one that will let you attach JavaScript events to the controls on a SharePoint form.

I used this bit of code to attach an onChange() event to a select drop-down that would show or hide a textbox based on the selection that had been made. I know there's a lot going on in these screen caps, but for the moment, just focus on the Status drop-down and the displaying of the Outcome row.

(before)

(after)

var theTRs = document.getElementsByTagName("TR");
var rowTitle = "";
for (var r in theTRs) { // loop through every table row on the page
if (theTRs[r].getElementsByTagName("TD")[0]) {
rowTitle = theTRs[r].getElementsByTagName("TD")[0].innerText || theTRs[r].getElementsByTagName("TD")[0].textContent;
rowTitle = (!rowTitle) ? "" : trim(rowTitle);
}
// START PER/ROW CODE //
if (rowTitle.match(/^Status$/)) {
var cellStatus = theTRs[r].getElementsByTagName("TD")[1]; // the cell holding the select dropdown
/** This is where the magic happens.  It's not clean or pretty, but it works. **/
cellStatus.innerHTML = theSel.innerHTML.replace(/\<select /i,"<select onChange='statusChange(this.value)' ");
/** I had trouble working with attachEvent & addEventListener so I did it this way **/
theTRs[r].id = "rowStatus" // it's generally ok to assing IDs to rows in SharePoint, but it's very bad form to assign IDs to form controls
}
else if (rowTitle.match(/^Outcome$/)) {
if (cellStatus.getElementsByTagName("SELECT")[0].value.match(/^Pending$/) {
theTRs[r].style.display = "none"; // hide the outcome row if the status is pending
}
theTRs[r].id = "rowOutcome"; // for show/hiding in the statusChange() function
}
// END OF PER/ROW CODE //
}

function statusChange(x) {
if (x.match(/^Completed$/)) {
document.getElementById("rowOutcome").style.display = "";
} else {
document.getElementById("rowOutcome").style.display = "none";
}
}

function trim(x)
{
x = x.replace(/(^\t)(\t*)/,"").replace(/(\t*)(\t$)/,"") // tabs
.replace(/(^\n)(\n*)/,"").replace(/(\n*)(\n$)/,"") // new lines
.replace(/(^\r)(\r*)/,"").replace(/(\r*)(\r$)/,"") // return characters
.replace(/(^<br>)(<br>*)/,"").replace(/(<br>*)(<br>$)/,"") // html returns
.replace(/(^ )( *)/,"").replace(/( *)( $)/,"") // spaces
.replace(/(^&nbsp;)(&nbsp;*)/,"").replace(/(&nbsp;*)(&nbsp;$)/,""); // html spaces
return x;
}