How can it be more cross-browser compatible, robust, better performance if possible?
var Form={
/*QA :
Goals : Cross browser compliant 2.DRYness 3. performant
*/
formObjects:{
enumObjects : function(){
for(var i=0; i < this.length; i++){
console.log(this[i]);
}
},
},
categories:{
properties:['Houses','Apartments','Commercial Property', 'Land/Plots'],
vehicles:['Sedans', 'Hatchbacks', 'SUVs', 'Pickups and Double-Cabs','Vans','Trucks and Lorries',
'Vans', 'Buses', 'Motorcycles'],
electronics:['Desktop Computers','Laptops and Tablets','Stereo and Home Theatre Systems','Cellphones','Networking Equipment','Other'],
services:['Medical','Dental','Legal','Financial Services','Printing and Professional Services','Auto Service','Vehicle Rental','Equipment Rentals','Electrical/Plumbing','Carpentry'],
travel:['Accomodation', 'Lodges/Cabins','Travel Agents', 'Safaris/Tours','Taxis/Shuttle Services']
},
cityareas:{
Blantyre: [ 'All','Bangwe','Che Mussa','Chirimba','Chadzunda','Chilomoni','Manase','Mpemba','Mbayani',
'Mpingwe','New Land','Mudi','Manyowe','Chatha','Kachere','Sunny Side',
'Nancholi','Nkolokoti','Nyambadwe','Kameza','Machinjiri',
'Chileka','Chigumula','Chichiri','Chinyonga','Kanjedza','Kampala',
'Manja','Limbe','Nkolokosa','Naperi','Chitawira','Ndirande',
'Goliyo','C.I','Chilobwe','Mount Pleasant','Baluti','Green Corner','Stella Maris'],
Mzuzu:['All','Katawa','Chasefu','Nkhorongo','Chiputula','Chiwavi','Zolozolo',
'Masasa','Mchengautuwa','Hilltop','Lupaso','Luwinga','Area 1b','Area4'],
Lilongwe:['All','Bunda','Chiwoko','Kabudula','Ntandile','Gaga','Ntsinje',
'Namichimba','Gologota','Tambalale','Lumbadzi', 'Biwi','Chilinde','Kawale','Chipasula','Mwenyekondo','Falls','Likuni','Chisapo','Chigwili','Katete','Nkhoma',
'Nanjiri','Kanengo','Msambachiko','Nathenje','Chiwuzila','Airwing','Chitedze','Nsundwe',
'Namitete']
},
/*
1. get selection from catselect, clear form, create child select element with eventlistner.
When child div is selected, check if it has children and create new form select element from that
*/
findForms:function(){
var formObjs=document.forms;
var arr=[];
//assign key value for each child element into formobjects
for(var i=0; i< formObjs.length; i++ ){
this.formObjects[formObjs[i].name]=Array.prototype.slice.call(formObjs[i].children);
};
},
selParent: function(elValue, el)
{
for (var prop in this)
{
this[prop].hasOwnProperty(elValue) ? this.childSel(this[prop][elValue], el) : ' ';
};
},
childSel : function(nodeVal, refNode) {
if( (refNode.nextElementSibling !=null) && (refNode.nextElementSibling.name == 'subcats' ) )
{
/*
if sibling exists, remove entries and enter new entries
*/
var siblingEl=document.getElementById(refNode.nextElementSibling.id);
siblingEl.options.length=0;
for(var i=0; i< nodeVal.length; i++)
{
var option=document.createElement('option');
option.text=nodeVal[i];
siblingEl.add(option,siblingEl[i]);
}
} else{
var siblingEl = document.createElement('select');
siblingEl.id = refNode.value;
siblingEl.name='subcats';
refNode.parentNode.insertBefore(siblingEl, refNode.nextElementSibling);
for(var i=0; i< nodeVal.length; i++)
{
var option=document.createElement('option');
option.text=nodeVal[i];
siblingEl.add(option,siblingEl[i]);
}
}
},
init: function(){
var i=0, objForm=this;
this.findForms(); //initialises the form objects
for(key in this.formObjects){
for (var i=0; i<this.formObjects[key].length; i++){
if(this.formObjects[key][i].nodeName=='SELECT'){
var selId=document.getElementById(this.formObjects[key][i].id);
//value of *this* changes to target element in addEventListener
selId.addEventListener('change',
function(event)
{
var item=this.value;
objForm.selParent(item,this);
event.stopPropagation();
},
false );
}
}
i++;
};
} //End Init
}
