As SharePoint is built on ASP.NET 3.5 technology, it is acting like an ASP.NET WebForm and generates long ID property for each control placed on the page. The difficulty is to control the ID in order to manipulate form elements on client side with JavaScript. Here is a little code I wrote and can be used for didactical purpose and extended.
First thing I would do is to create a namespace where I should put the objects. This is simple to achieve, as SharePoint already incorporates MicrosoftAjax.js library. So if is already there, why should not use it?
Type.registerNamespace("SHP");
Again with a help from MicrosoftAjax.js, I will create an object called “UI” (from User Interface).
SHP.UI = function() {}
I will add methods to my object to be accessed like static methods. First we will start with helper methods, which are supposed to be internal and not to be used directly in your code.
SHP.UI._GetControlsLen = function(index) {
/// <summary>Get numbers of controls in a form. Not intended to be used directly in your code</summary>
/// <param name="index" type="Integer">Index of HTML form.</param>
return document.forms[index].elements.length;
}
SHP.UI.GetElementById = function(elementId) {
/// <summary>Get form by a substring contained in ID property.</summary>
/// <param name="elementId" type="String">Portion of ID we are searching for.</param>
for(var f = 0; f < document.forms.length; f++) {
for(var i = 0;i < this._GetControlsLen(f); i++) {
var control = document.forms[f].elements[i];
if(control.id.indexOf(elementId) != -1) {
return control;
}
}
}
return null;
}
SHP.UI._GetCheckBoxListValues = function(elementId) {
/// <summary>Get values from checkbox list.</summary>
/// <param name="elementId" type="String">Portion of ID we are searching for.</param>
var checkedValues = new Array();
var labels = document.getElementsByTagName('LABEL');
for(var i = 0; i < labels.length; i++) {
var label = document.getElementsByTagName('LABEL')[i];
var forProperty = label.getAttribute('for');
if(forProperty) {
if(forProperty.indexOf(elementId) != -1) {
var checkBox = document.getElementById(forProperty);
if((checkBox.checked == true) && (checkBox.type == 'checkbox')) {
checkedValues.push(label.innerHTML.toString());
}
}
}
}
if(checkedValues.length == 0) {
return checkedValues;
}
else {
return checkedValues.join(';#');
}
}
SHP.UI._GetValueByType = function(form_control,seachedId) {
/// <summary>Gets the value of the control, depending on type.</summary>
/// <param name="form_control" type="HTMLElement">Form control.</param>
/// <param name="seachedId" type="String">Substring we search in ID.</param>
var control_type = (control !== null) ? form_control.type : null;
switch(control_type) {
// input text
case 'text':
return form_control.value.toString();
// textarea
case 'textarea':
return form_control.value.toString();
// input hidden
case 'hidden':
return form_control.value.toString();
// input password
case 'password':
return form_control.value.toString();
// select control accepting single selection
case 'select-one':
if(form_control.options.length == 0) {
return '';
}
else {
return form_control.options[form_control.selectedIndex].value.toString();
}
// select control accepting multiple selections
case 'select-multiple':
var selectedValues = new Array();
for(var i = 0; i < form_control.options.length;i++) {
if(form_control.options[i].selected == true) {
selectedValues.push(form_control.options[i].value.toString());
}
}
if(selectedValues.length ==0 ) { return 0; } else { return selectedValues.join(';#;#') };
// form checkbox list
case 'checkbox':
return SHP.UI._GetCheckBoxListValues(searchedId);
default:
return '';
}
}
Now is time to create final method to get the value of a control and finalize the class.
SHP.UI.GetControlValue = function(elementId) {
var control = this.GetElementById(elementId);
return this._GetValueByType(control,elementId);
}
SHP.UI.registerClass("SHP.UI");
Usage is simple. For example, you have a control with ID containing “TicketTitle”. Calling method SHP.UI.GetControlValue(“TicketTitle”) will return the value of it. In case is not visible on the form, as some conditional formatting can be applied, an empty string is returned.
And now, all lines together. Extend the code and/or share your ideas with me.
Type.registerNamespace("SHP");
SHP.UI = function() {}
SHP.UI._GetControlsLen = function(index) {
/// <summary>Get numbers of controls in a form. Not intended to be used directly in your code</summary>
/// <param name="index" type="Integer">Index of HTML form.</param>
return document.forms[index].elements.length;
}
SHP.UI.GetElementById = function(elementId) {
/// <summary>Get form by a substring contained in ID property.</summary>
/// <param name="elementId" type="String">Portion of ID we are searching for.</param>
for(var f = 0; f < document.forms.length; f++) {
for(var i = 0;i < this._GetControlsLen(f); i++) {
var control = document.forms[f].elements[i];
if(control.id.indexOf(elementId) != -1) {
return control;
}
}
}
return null;
}
SHP.UI._GetCheckBoxListValues = function(elementId) {
/// <summary>Get values from checkbox list.</summary>
/// <param name="elementId" type="String">Portion of ID we are searching for.</param>
var checkedValues = new Array();
var labels = document.getElementsByTagName('LABEL');
for(var i = 0; i < labels.length; i++) {
var label = document.getElementsByTagName('LABEL')[i];
var forProperty = label.getAttribute('for');
if(forProperty) {
if(forProperty.indexOf(elementId) != -1) {
var checkBox = document.getElementById(forProperty);
if((checkBox.checked == true) && (checkBox.type == 'checkbox')) {
checkedValues.push(label.innerHTML.toString());
}
}
}
}
if(checkedValues.length == 0) {
return checkedValues;
}
else {
return checkedValues.join(';#');
}
}
SHP.UI._GetValueByType = function(form_control,seachedId) {
/// <summary>Gets the value of the control, depending on type.</summary>
/// <param name="form_control" type="HTMLElement">Form control.</param>
/// <param name="seachedId" type="String">Substring we search in ID.</param>
var control_type = (control !== null) ? form_control.type : null;
switch(control_type) {
// input text
case 'text':
return form_control.value.toString();
// textarea
case 'textarea':
return form_control.value.toString();
// input hidden
case 'hidden':
return form_control.value.toString();
// input password
case 'password':
return form_control.value.toString();
// select control accepting single selection
case 'select-one':
if(form_control.options.length == 0) {
return '';
}
else {
return form_control.options[form_control.selectedIndex].value.toString();
}
// select control accepting multiple selections
case 'select-multiple':
var selectedValues = new Array();
for(var i = 0; i < form_control.options.length;i++) {
if(form_control.options[i].selected == true) {
selectedValues.push(form_control.options[i].value.toString());
}
}
if(selectedValues.length ==0 ) { return 0; } else { return selectedValues.join(';#;#') };
// form checkbox list
case 'checkbox':
return SHP.UI._GetCheckBoxListValues(searchedId);
default:
return '';
}
}
SHP.UI.GetControlValue = function(elementId) {
var control = this.GetElementById(elementId);
return this._GetValueByType(control,elementId);
}
SHP.UI.registerClass("SHP.UI");
Popescu Andrei Vlad 