Accessing DOM Objects

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,855 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,575 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 9501 | Replies: 0

•

Join Date: Apr 2005

Posts: 14

Reputation: nandoo is an unknown quantity at this point

Rep Power: 4

Solved Threads: 0

nandoo

Offline

Newbie Poster

Accessing DOM Objects

May 3rd, 2005

Hi,
here i enclosed my coding.i want the dom objects price,qty,oselect,name,sku and upc in the html body tag so that it can be submitted into another pages.
here i want each and every element in each row to be collected and sent to the next place not the last element alone plz help me

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<title> working with jscript</title>
<script type="text/javascript">
function appendtable()
{
	var parent = document.getElementById("divide");
	var div = document.createElement("div");
	
	var tbl = div.appendChild(document.createElement("table"));
	var tb = tbl.appendChild(document.createElement("tbody"));
	var tr = tb.appendChild(document.createElement("tr"));
	var td = tr.appendChild(document.createElement("td"));
	
	parent.appendChild(div);

	var oSelect=document.createElement("select");
	var oOption = document.createElement("option");
	var t0 = document.createTextNode("Ferrari");
	oOption.setAttribute("value", 0);
	oOption.appendChild(t0);
	oSelect.appendChild(oOption);

	var oOption1 = document.createElement("option");
	var t1 = document.createTextNode("Fessari");
	oOption1.setAttribute("value", 1);
	oOption1.appendChild(t1);
	oSelect.appendChild(oOption1);
	

	var pname=document.createElement("input");
	pname.type="text";
	pname.value="product name"
	pname.name = "pname";

	var price=document.createElement("input");
	price.type="text";
	price.value="product price"

	var qty=document.createElement("input");
	qty.type="text";
	qty.value="product quantity"
	
	var sku=document.createElement("input");
	sku.type="text";
	sku.value="product SKU"
	
	var upc=document.createElement("input");
	upc.type="text";
	upc.value="product UPC"
	
	td.appendChild(oSelect);
	td.appendChild(pname);
	td.appendChild(price);
	td.appendChild(qty);
	td.appendChild(sku);
	td.appendChild(upc);
                  oSelect.onchange=function(){ txtChange(this,pname,price,qty,sku,upc); }
}

// get element with name from parent node...
function elementOfName(parentNode, name){
	var nodeList = parentNode.getElementsByTagName("INPUT");
	for(var i=0; i<nodeList.length; i++){
		if(nodeList.item(i).name == name){
			return nodeList.item(i);
		}
	}
	return null;
}

function txtChange(obj,pname,price,qty,sku,upc){
	
                  var pname = elementOfName(obj.parentNode, "pname");
	//var price = elementOfName(obj.parentNode, "price");
                 	var pQty = elementOfName(obj.parentNode, "qty");
                 	var SKU = elementOfName(obj.parentNode, "price");
                 	var UPC = elementOfName(obj.parentNode, "qty");// this is not working i dont know why....
          
	
}
</script>
</head>
<body bgcolor=white>

  <FORM ACTION=dlist.html METHOD=POST>
Purchase Order ID <input type="text" name="poId"><br>
Sendor Address <input type="text" name="senderAddress"><br>
Vendor Address <input type="text" name="vendorAddress"><br>
poStatus <input type="text" name="poStatus"><br>
poDate <input type="text" name="poDate"><br>
expDate <input type="text" name="expDate"><br><br>
<h4> Product Details</h4>
<input type="button" onclick="appendtable()" value="Add Product">
<div id="divide"></div>
<input type="hidden" name=pId>//here i m sending eachand every product to submitted into the next page 
<input type="hidden" name=pName>
<input type="hidden" name=price>
<input type="hidden" name=pQty>
<input type="hidden" name=SKU>
<input type="hidden" name=UPC>
<br> <input type="submit" name="btnSubmit" value="Submit Order">
</form>
</body>
</html>

<html>
<head>
<title> working with jscript</title>
<script type="text/javascript">
function appendtable()
{
	var parent = document.getElementById("divide");
	var div = document.createElement("div");
	
	var tbl = div.appendChild(document.createElement("table"));
	var tb = tbl.appendChild(document.createElement("tbody"));
	var tr = tb.appendChild(document.createElement("tr"));
	var td = tr.appendChild(document.createElement("td"));
	
	parent.appendChild(div);

	var oSelect=document.createElement("select");
	var oOption = document.createElement("option");
	var t0 = document.createTextNode("Ferrari");
	oOption.setAttribute("value", 0);
	oOption.appendChild(t0);
	oSelect.appendChild(oOption);

	var oOption1 = document.createElement("option");
	var t1 = document.createTextNode("Fessari");
	oOption1.setAttribute("value", 1);
	oOption1.appendChild(t1);
	oSelect.appendChild(oOption1);
	

	var pname=document.createElement("input");
	pname.type="text";
	pname.value="product name"
	pname.name = "pname";

	var price=document.createElement("input");
	price.type="text";
	price.value="product price"

	var qty=document.createElement("input");
	qty.type="text";
	qty.value="product quantity"
	
	var sku=document.createElement("input");
	sku.type="text";
	sku.value="product SKU"
	
	var upc=document.createElement("input");
	upc.type="text";
	upc.value="product UPC"
	
	td.appendChild(oSelect);
	td.appendChild(pname);
	td.appendChild(price);
	td.appendChild(qty);
	td.appendChild(sku);
	td.appendChild(upc);
                  oSelect.onchange=function(){ txtChange(this,pname,price,qty,sku,upc); }
}

// get element with name from parent node...
function elementOfName(parentNode, name){
	var nodeList = parentNode.getElementsByTagName("INPUT");
	for(var i=0; i<nodeList.length; i++){
		if(nodeList.item(i).name == name){
			return nodeList.item(i);
		}
	}
	return null;
}

function txtChange(obj,pname,price,qty,sku,upc){
	
                  var pname = elementOfName(obj.parentNode, "pname");
	//var price = elementOfName(obj.parentNode, "price");
                 	var pQty = elementOfName(obj.parentNode, "qty");
                 	var SKU = elementOfName(obj.parentNode, "price");
                 	var UPC = elementOfName(obj.parentNode, "qty");// this is not working i dont know why....
          
	
}
</script>
</head>
<body bgcolor=white>

  <FORM ACTION=dlist.html METHOD=POST>
Purchase Order ID <input type="text" name="poId"><br>
Sendor Address <input type="text" name="senderAddress"><br>
Vendor Address <input type="text" name="vendorAddress"><br>
poStatus <input type="text" name="poStatus"><br>
poDate <input type="text" name="poDate"><br>
expDate <input type="text" name="expDate"><br><br>
<h4> Product Details</h4>
<input type="button" onclick="appendtable()" value="Add Product">
<div id="divide"></div>
<input type="hidden" name=pId>//here i m sending eachand every product to submitted into the next page 
<input type="hidden" name=pName>
<input type="hidden" name=price>
<input type="hidden" name=pQty>
<input type="hidden" name=SKU>
<input type="hidden" name=UPC>
<br> <input type="submit" name="btnSubmit" value="Submit Order">
</form>
</body>
</html>