Easily Extract Field IDs From SharePoint Forms

Time for another highly specialized, but very useful little bit of Javascript!

I found that I was frequently needing to find out what the ID was for a number of fields on a form and I was constantly digging through heaps of HTML source code to track them down. Well, I decided that I wanted it to be a bit easier so here's what I came up with:

The Challenge: I often need to find the IDs for <input> fields on a form.

The Problem: Digging through HTML to find field IDs is a pain in the butt.

The Solution: A small snippet of Javascript that puts a button next to the field that I can click on to copy the field ID to the clipboard for easy pasting into whatever I'm working on. Past this code into a CEWP below the form and you'll see what I'm talking about:

<input type=text id="output" value="" style="width:100%" />
<script type="text/javascript">
var fldOutput = document.getElementById("output");

var theInputs = document.getElementsByTagName("INPUT");
var a=0;
while (a < theInputs.length)
{
try
{
if (theInputs[a].type != "hidden" && theInputs[a].id != "output")
{
 theInputs[a].outerHTML = ("<nobr>" + theInputs[a].outerHTML + "<span onClick='copyIt(" + theInputs[a].id + ")' style='position:relative; color:red; cursor:hand; font-size:medium'> &bull; </span></nobr>");
}
}
catch(err){}
a=a+1;
}

function copyIt(x)
{
var strID = "";
strID = x.id;
fldOutput.setAttribute("value", strID);
fldOutput.select();
strCopy = document.selection.createRange();
strCopy.execCommand("Copy");
}
</script>

It should be noted that the actual copying will only work in IE, if you're using FF you'll have to copy the ID from the output field at the bottom of the page.

Enjoy!