Some JavaScript techniques and functions that will be helpful in web development.
1. Toggling visibility of a table or a div or any other element:
function toggle(div_id) { var el = document.getElementById(div_id); if ( el.style.display == 'none' ) { el.style.display = 'block';} else {el.style.display = 'none';} }
2. Remove all child nodes of an element:
var Parent = document.getElementById('elementId'); while(Parent.hasChildNodes()) { Parent.removeChild(Parent.firstChild); }
3. Validate radio group:
function checkradio(formNme,radioGroupName) { var radios=document[formNme].elements[radioGroupName]; for(var i=0;i<radios.length;i++){ if(radios[i].checked) return true; } return false; }
4. Sending an async request to server:
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = handleReadyStateChange; xmlhttp.send(null); function handleReadyStateChange() { if (xmlhttp.readyState == 4) { ///--- Request completed } }
5. To hide/disable scroll bar of a browser:
document.documentElement.style.overflow=document.body.style.overflow='hidden'; // To again enable scroll bar do as follows: document.documentElement.style.overflow=document.body.style.overflow='auto';
6. Validate url using Regex:
function isValidURL(url){ //var RegExp = /^(http:\/\/|https:\/\/|ftp:\/\/){1}([0-9A-Za-z]+\.)/; var RegExp = /^(http:\/\/){1}([0-9A-Za-z]+\.)/; if (RegExp.test(url)) { return true; } return false; }
7. Swap table columns:
function swapColumns (table, colIndex1, colIndex2) { if (!colIndex1 < colIndex2){ var t = colIndex1; colIndex1 = colIndex2; colIndex2 = t; } if (table && table.rows && table.insertBefore && colIndex1 != colIndex2) { for (var i = 0; i < table.rows.length; i++) { var row = table.rows[i]; var cell1 = row.cells[colIndex1]; var cell2 = row.cells[colIndex2]; var siblingCell1 = row.cells[Number(colIndex1) + 1]; row.insertBefore(cell1, cell2); row.insertBefore(cell2, siblingCell1); } } }
8. Tab view:
Refer to this link.
9. Limiting textbox/textarea to number of characters:
Refer to this link.
One thought on “Some useful JavaScript functions”