RSS

Replace Input HTML tags

20 Sep

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);
 }
 }
 } 
}
 
Leave a comment

Posted by on September 20, 2013 in General, Javascript, jquery

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: