How 2 Guru

Dynamic wizard form using dhtml & javascript.

Recently I am working in a project that require some customization on the application.
They need a wizard page that will allow user to add in items.

To make the wizard page be more user friendly, I try to using dynamic html to create fields if required.
When user add in a item, the page will create a row in a table & display item’s information inside the table.
User are able to delete the item after add in.
It is not a hard task. Just sharing my experience to others.

I am using the createTextNode, createElement and removeChild Javascript command to complete the task.

Below is my sample code:

<script>
count = 0;
function addField(type,field_name,field_id){
	if(document.getElementById(field_id).value.length > 0){
		var table_name = 'table1';
		var table  = document.getElementById(table_name);
		var tr  = document.createElement('tr');
		tr.setAttribute("id", 'row'+count);
		tr.style.backgroundColor = 'white';

		var td_a = document.createElement('td');
		td_a.className = 'dataLabel';
		td_a.setAttribute("width","40%");

		var td_b = document.createElement('td');
		td_b.className = 'dataLabel';
		td_b.setAttribute("width","56%");

		var td_c = document.createElement('td');
		td_c.className = 'dataLabel';
		td_c.setAttribute("width","4%");

		//Create a text label & display it, the parameter is the word that show in the label.
		var ta = document.createTextNode(type);
		var tb = document.createTextNode(document.getElementById(field_name).value);

		//Create a text field that hidden
		var tc = addInputElement('class_id[]',document.getElementById(field_id).value,'hidden','36','row'+count,table);
		var td = addInputElement('student_type[]',type,'hidden','36','row'+count,table);

		//Create a button that will trigger onclick action
		var te = addInputElement('button_delete'+count,"X",'button','10','row'+count,table);

		td_a.appendChild(ta);
		td_b.appendChild(tb);
		td_c.appendChild(tc);
		td_c.appendChild(td);
		td_c.appendChild(te);

		tr.appendChild(td_a);
		tr.appendChild(td_b);
		tr.appendChild(td_c);

		if (browser=="Netscape"){
			table.appendChild(tr);
		}else if(browser=="Microsoft Internet Explorer"){
			table.tBodies[0].appendChild(tr);
		}
		count += 1;
	}
}

//This function will specify those field to be create with the name, id, type, value.
//If is a button, will specify the onclick trigger action
function addInputElement(name, value, type,size,rid,table){
	var temp;
	temp = document.createElement("input");
	temp.setAttribute("type", type);
	temp.setAttribute("name", name);
	temp.setAttribute("id", name);
	temp.setAttribute("value", value);
	temp.setAttribute("size", size);
	if(type == "button"){
		temp.className = "button";
		temp.onclick  = function(){deleteItems(table,rid);}
	}
	return temp;
}

function deleteItems(table,id){
	var t  = document.getElementById(table);
	var d = document.getElementById(id);
	var e = document.getElementById(id+'description');
	if (browser=="Netscape"){
		t.removeChild(d);
		if(table == 'step2'){
			t.removeChild(e);
		}
	}else if(browser=="Microsoft Internet Explorer"){
		t.tBodies[0].removeChild(d);
		if(table == 'step2'){
			t.tBodies[0].removeChild(e);
		}
	}
}

</script>