November 16, 2006

How to change duration or time picklist values

In previous post I suggested tweaking the form in the onLoad method to change the values of the duration or time picklist.

Values are stored in a table that looks like this:
<TABLE>
<TBODY>
<TR><TD val=""></TD></TR>
<TR><TD val="1 minute">1 minute</TD></TR>
<TR><TD val="2 minutes">2 minutes</TD></TR>
...
</TBODY>
</TABLE>


All you need is to change the table values so here's an example of the onLoad script that deletes all values from phone duration field and adds two new - 11 and 22 minutes to the list.
Of course you can decide to delete only the vales you want or just add new values.

//Get the duration field
var oDuration = document.getElementById("actualdurationminutesSelect");

//Get the values table. The values table is the second table
var oTable = oDuration.getElementsByTagName("TABLE")[1];

//Get the table TBODY element
var oTbody = oTable.firstChild;

var childs = oTbody.childNodes;

//Delete all values
for(var i=childs.length; i-- ; i>= 0)
{
oTbody.removeChild(childs(i));
}

//Create TR and TD elements
var oTr = document.createElement("TR");
var oTd = document.createElement("TD");

oTd.innerText = "11 minutes"; //Set value

var oValue = document.createAttribute("val"); //Create attribute node
oValue.value = "11 minutes"; //Set value of the attribute

//Add elements to the table
oTd.attributes.setNamedItem(oValue);
oTr.appendChild(oTd);
oTbody.appendChild(oTr);


//Repeat...
oTr = document.createElement("TR");
oTd = document.createElement("TD");

oTd.innerText = "22 minutes"; //Set display value

var oValue = document.createAttribute("val");
oValue.value = "22 minutes";


oTd.attributes.setNamedItem(oValue);
oTr.appendChild(oTd);
oTbody.appendChild(oTr);


No comments: