Replace input html tag to span tag using javascript recursion function. “getFormchildren(startNode,output)” method contain startNode and output div.
Following methods replace tag and its child tag upto end child tag using recursion. We can differentiate value field,non value field, checkbox, radio button, and textarea.
function getFormChildren(startNode, output){
var nodes;
if(startNode.childNodes){
nodes = startNode.childNodes;
childrenNode(nodes, output);
}else{
alert("The Doesnot Have any Child");
}
}
function childrenNode(nodes, output){
var node;
for(var i=0;i<nodes.length;i++){
node = nodes[i];
if(output){
childNode(node);
}
if(node.childNodes){
getFormChildren(node, output);
}
}
}
function childNode(node){
var isCheckBoxChecked = 0;
var isRadioChecked = 0;
if(node.nodeType == 1){
if((node.getAttribute('value') == null || node.getAttribute('value') == "") || (node.id == null || node.id == "")){
if((node.tagName == 'INPUT' || node.tagName == 'input')&&(node.type != "radio" || node.type != "RADIO")&& (node.type != "checkbox" || node.type != "CHECKBOX")){
$('input[type=button]').each(function(){
$(this).remove();
});
$('input[type=submit]').each(function(){
$(this).remove();
});
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",node.id);
htmlSourceViewObj.setAttribute("name",node.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onchange'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onClick'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onFocus'));
htmlSourceViewObj.setAttribute("class",node.getAttribute('class'));
var value=document.createTextNode(node.value);
htmlSourceViewObj.appendChild(value);
$("#"+node.id).replaceWith(htmlSourceViewObj);
}else if(node.id == null || node.id == "") {
}else if(node.tagName == "SELECT" || node.tagName == 'select'){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",node.id);
htmlSourceViewObj.setAttribute("name",node.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onchange'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onClick'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onFocus'));
htmlSourceViewObj.setAttribute("class",node.getAttribute('class'));
var value=document.createTextNode(node.value);
htmlSourceViewObj.appendChild(value);
$("#"+node.id).replaceWith(htmlSourceViewObj);
}else if((node.tagName == 'textarea' || node.tagName == 'TEXTAREA')){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",node.id);
htmlSourceViewObj.setAttribute("name",node.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onClick'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onFocus'));
htmlSourceViewObj.setAttribute("class",node.getAttribute('class'));
var value=document.createTextNode(node.value);
htmlSourceViewObj.appendChild(value);
$("#"+node.id).replaceWith(htmlSourceViewObj);
}else if((node.tagName == 'img' || node.tagName == 'IMG')){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",node.id);
htmlSourceViewObj.setAttribute("name",node.name);
htmlSourceViewObj.setAttribute("src",node.getAttribute('src'));
htmlSourceViewObj.setAttribute("gridName",node.getAttribute('gridName'));
htmlSourceViewObj.setAttribute("height",node.getAttribute('height'));
htmlSourceViewObj.setAttribute("width",node.getAttribute('width'));
var value=document.createTextNode(node.getAttribute('src'));
htmlSourceViewObj.appendChild(value);
$("#"+node.id).replaceWith(htmlSourceViewObj);
}else{
}
}else{
if((node.tagName == 'INPUT' || node.tagName == 'input')&&(node.type == "checkbox" || node.type == "CHECKBOX")){
if(isCheckBoxChecked == 0){
$('input[type=checkbox]').each(function(){
if($(this).is(':checked')){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",this.id);
htmlSourceViewObj.setAttribute("name",this.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",this.getAttribute('onchange'));
htmlSourceViewObj.setAttribute("class",this.getAttribute('class'));
var value=document.createTextNode("True ");
htmlSourceViewObj.appendChild(value);
$(this).replaceWith(htmlSourceViewObj);
}
if ($(this).is(':not(:checked)')){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",this.id);
htmlSourceViewObj.setAttribute("name",this.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",this.getAttribute('onchange'));
htmlSourceViewObj.setAttribute("class",this.getAttribute('class'));
var value=document.createTextNode("False ");
htmlSourceViewObj.appendChild(value);
$(this).replaceWith(htmlSourceViewObj);
}
});
isCheckBoxChecked = 1;
}
}else if((node.tagName == 'INPUT' || node.tagName == 'input')&&(node.type == "radio" || node.type == "RADIO")){
if(isRadioChecked == 0){
$('input[type=radio]').each(function(){
if($(this).is(':checked')){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",this.id);
htmlSourceViewObj.setAttribute("name",this.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",this.getAttribute('onchange'));
htmlSourceViewObj.setAttribute("class",this.getAttribute('class'));
var value=document.createTextNode("True ");
htmlSourceViewObj.appendChild(value);
$(this).replaceWith(htmlSourceViewObj);
}
if ($(this).is(':not(:checked)')){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",this.id);
htmlSourceViewObj.setAttribute("name",this.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",this.getAttribute('onchange'));
htmlSourceViewObj.setAttribute("class",this.getAttribute('class'));
var value=document.createTextNode("False ");
htmlSourceViewObj.appendChild(value);
$(this).replaceWith(htmlSourceViewObj);
}
});
isRadioChecked = 1;
}
}else if((node.tagName == 'INPUT' || node.tagName == 'input')&&(node.type != "radio" || node.type != "RADIO")&& (node.type != "checkbox" || node.type != "CHECKBOX")){
$('input[type=button]').each(function(){
$(this).remove();
});
$('input[type=submit]').each(function(){
$(this).remove();
});
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",node.id);
htmlSourceViewObj.setAttribute("name",node.getAttribute('name'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onchange'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onClick'));
htmlSourceViewObj.setAttribute("onchange",node.getAttribute('onFocus'));
htmlSourceViewObj.setAttribute("class",node.getAttribute('class'));
var value=document.createTextNode(node.getAttribute('value'));
htmlSourceViewObj.appendChild(value);
$("#"+node.id).replaceWith(htmlSourceViewObj);
}else if((node.tagName == 'img' || node.tagName == 'IMG')){
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",node.id);
htmlSourceViewObj.setAttribute("name",node.name);
htmlSourceViewObj.setAttribute("src",node.getAttribute('src'));
htmlSourceViewObj.setAttribute("gridName",node.getAttribute('gridName'));
htmlSourceViewObj.setAttribute("height",node.getAttribute('height'));
htmlSourceViewObj.setAttribute("width",node.getAttribute('width'));
var value=document.createTextNode(node.getAttribute('src'));
htmlSourceViewObj.appendChild(value);
$("#"+node.id).replaceWith(htmlSourceViewObj);
}else{
var htmlSourceViewObj = document.createElement("span");
htmlSourceViewObj.setAttribute("id",node.id);
htmlSourceViewObj.setAttribute("name",node.getAttribute('name'));
htmlSourceViewObj.setAttribute("class",node.getAttribute('class'));
var value=document.createTextNode(node.value);
htmlSourceViewObj.appendChild(value);
$("#"+node.id).replaceWith(htmlSourceViewObj);
}
}
}
}