Working with Numbers and Math
Since the built in function, Number(), does not parse forms number field data due to the commas, I use this function all the time as an alternative
function Num(strNumber) {
strNumber += '';
strNumber = strNumber.split(',').join('');
return Number(strNumber);
}
Reading Table Values as an Array
Working with values from a table is common and working inside of a loop can be confusing. This function returns a single object that represents the entire table.
function GetTableValues() {
//Create the object that will return with the table's values
var columns = {};
//For each column, create an array inside the columns object
var tableName = arguments[0];
for (var i = 1; i < arguments.length; i++) {
columns[arguments[i]] = [];
}
//For each column array
//You could loop through rows, then columns but not sure if either is more performant
Object.keys(columns).forEach(function (key) {
//For each row in the table
$('li.' + tableName + ' tbody tr').each(function () {
//Get the value and add to the array
var rowValue = $(this).find('.' + key + ' input').val();
if (rowValue) {
columns[key].push(rowValue);
} else {
//We could not get a value from an input, try select
rowValue = $(this).find('.' + key + ' select').val();
if (rowValue) { columns[key].push(rowValue); } else {
//We could not get a value from an input or a select, likely just an empty value
//Push empty into the array
columns[key].push("");
}
}
});
});
return columns;
}
Usage:
var myTable = GetTableValues('tableClassName', 'columnClassName1', 'columnClassname2', etc);
var column1row3value = myTable.columnClassName1[2];
Create objects on the fly
Sometimes I want to create a message, button, etc on the fly. This method allows me to do so and set the parent object by class to determine where it shows up on the form.
function Instantiate(newClassName, parent = 'cf-formwrap', type = 'div') {
var newObject = document.createElement(type);
newObject.classList.add(newClassName);
if (typeof parent === 'string') {
document.getElementsByClassName(parent)[0].appendChild(newObject);
} else {
parent.appendChild(newObject);
}
return newObject;
}
Usage, causing "Hello World" to appear under an input with class name someInput
var HelloWorldMessage = Instantiate('helloMessage', 'someInput');
HelloWorldMessage.html('Hello World');
Destroy Instantiated Objects
function Destroy(element) {
element.parentNode.removeChild(element);
}
Converting Input Fields to Hyperlinks
Sometimes workflow is setting the value of a variable with a link to a file in the repository, or a user is entering something like a Google Maps or Amazon link into a form. This turns an input field into a working hyperlink that other users can click on.
function ShowLink(event) {
if (event.target.value == '')
return;
if (event.target.parentNode.childNodes.length > 1) {
event.target.parentNode.childNodes[1].innerHTML = '<a href="' + event.target.value + '" target="_blank">' + event.target.value + '</a>';
} else {
var newObject = document.createElement('div');
event.target.parentNode.appendChild(newObject);
newObject.innerHTML = '<a href="' + event.target.value + '" target="_blank">' + event.target.value + '</a>';
}
}
Usage:
$('.link input').on('change',ShowLink);
$('.link input').mouseover(ShowLink);