PDA

View Full Version : Need some advice on a dom function that creates a pretty standard form.

ghostz00
04-01-2008, 09:45 PM
I have a function that basically makes a copy of an already existing form on demand. And the way I wrote it works, but it's long and tedious and to me it just seems like there is a better way to do it.

function newElement(elm,elmName,closingTag){
var elmName=elmName+numObj;
try{
if (closingTag)
var oElm=document.createElement("<"+elm+" name='"+elmName+"'></"+elm+">");
else
var oElm=document.createElement("<"+elm+" name='"+elmName+"'>");
}
catch(e){
oElm=document.createElement(elm);
oElm.setAttribute("name",elmName);
}

return oElm;
}

function newItem(){
numObj++;
//div item that encapsulates all of the form elements
var divItem=document.createElement("div");
divItem.setAttribute("id","item"+numObj);
divItem.className="item";
divItems.appendChild(divItem);

//qty label
var qty=document.createElement("label");
divItem.appendChild(qty);
qty.setAttribute("for","qty"+numObj);
qty.innerHTML="Qty:";

//qty input
qtyInput=newElement("input","qty",false);
qtyInput.setAttribute("id","qty"+numObj);
qtyInput.setAttribute("type","text");
divItem.appendChild(qtyInput);
qtyInput.style.width="30px";


//item label
var item=document.createElement("label");
divItem.appendChild(item);
item.setAttribute("for","item"+numObj);
item.innerHTML="Item:";

itemInput=newElement("input","item",false)
itemInput.setAttribute("id","item"+numObj);
itemInput.setAttribute("type","text");

divItem.appendChild(itemInput);

//select moulder
var selectInput=newElement("select","type",true);
divItem.appendChild(selectInput);

//option moulder
var optionInput=document.createElement("option");
optionInput.setAttribute("value","moulder");
selectInput.appendChild(optionInput);
optionInput.innerHTML="Moulder";

//br
var br=document.createElement("br");
divItem.appendChild(br);

//desc label
var desc=document.createElement("label");
divItem.appendChild(desc);
desc.setAttribute("for","desc"+numObj);
desc.innerHTML="Desc:";

//desc input
var descInput=newElement("input","desc",false);
descInput.setAttribute("type","text");
descInput.setAttribute("id","desc"+numObj);
divItem.appendChild(descInput);

//br
var br=document.createElement("br");
divItem.appendChild(br);

//itemdate label
var desc=document.createElement("label");
divItem.appendChild(desc);
desc.setAttribute("for","itemdate"+numObj);
desc.innerHTML="Date:";

//itemdate input
var itemdateInput=newElement("input","itemdate",false);
itemdateInput.setAttribute("type","text");
itemdateInput.setAttribute("id","itemdate"+numObj);
divItem.appendChild(itemdateInput);

//delete button
var deleteBtn=document.createElement("input");
deleteBtn.setAttribute("type","button");
deleteBtn.setAttribute("value","Delete Item");
deleteBtn.setAttribute("id",numObj);
divItem.appendChild(deleteBtn);

if (deleteBtn.addEventListener)
deleteBtn.addEventListener("click", function (){ deleteItem(deleteBtn.id); },false )

else if(deleteBtn.attachEvent)
deleteBtn.attachEvent("onclick", function (){deleteItem(deleteBtn.id)});

//br
var br=document.createElement("br");
divItem.appendChild(br);

}
Any thoughts would be appreciated.
vwphillips
04-02-2008, 05:12 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var numObj=0;

function newItem(){
numObj++;
//div item that encapsulates all of the form elements
var divItem=zxcESA('DIV',{},{'id':'item'+numObj},document.getElementById('tst'));
divItem.className="item";
//qty label
zxcESA('LABLE',{},{'for':'qty'+numObj},divItem,'Qty:');
//qty input
zxcESA('INPUT',{width:'30px'},{'name':'qty','id':'qty'+numObj,'type':'text'},divItem);
//item label
zxcESA('LABLE',{},{'for':'item'+numObj},divItem,'Item:');
zxcESA('INPUT',{},{'name':'item','id':'item'+numObj,'type':'text'},divItem);
//select moulder
var selectInput=zxcESA('SELECT',{},{'name':'type'},divItem);
//option moulder
zxcESA('OPTION',{},{'value':'molder'},selectInput,'Moulder');
//br
zxcESA('BR',{},{},divItem);
//desc label
zxcESA('LABLE',{},{'for':'desc'+numObj},divItem,'Desc:');
//desc input
zxcESA('INPUT',{},{'name':'desc','id':'desc'+numObj,'type':'text'},divItem);
//br
zxcESA('BR',{},{},divItem);
//itemdate label
zxcESA('LABLE',{},{'for':'itemdate'+numObj},divItem,'Date:');
//itemdate input
zxcESA('INPUT',{},{'name':'itemdate','id':'itemdate'+numObj,'type':'text'},divItem);
//delete button
var deleteBtn=zxcESA('INPUT',{},{'type':'button','value':'Delete Item'},divItem);
if (deleteBtn.addEventListener) deleteBtn.addEventListener("click", function (){ deleteItem(divItem); },false );
else if(deleteBtn.attachEvent) deleteBtn.attachEvent("onclick", function (){deleteItem(divItem)});
//br
zxcESA('BR',{},{},divItem);
}

function deleteItem(obj){
obj.parentNode.removeChild(obj);
}

function zxcESA(zxcele,zxcstyle,zxca,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
for (key in zxca) zxcele.setAttribute(key,zxca[key]);
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}


/*]]>*/
</script></head>

<body>
<div id="tst" ></div>
<input type="button" name="" value="Add" onclick="newItem();" />

</body>

</html>

or you could hide example code in a hidden div, clone it and change the ids and names
ghostz00
04-03-2008, 08:38 PM
Thank you I never thought of doing some of those things before.