Getting Dom objects in html body tags [Archive]

View Full Version : Getting Dom objects in html body tags

nandoo

05-03-2005, 07:45 AM

hi all,

Just read the code and give me a solution.My question will be after the code...

<html>
<head>
<title> working with jscript</title>
<script>
function appendtable()
{
var parent = document.getElementById("divide");
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 t = document.createTextNode("Ferrari");
oOption.setAttribute("value", 0);
oOption.appendChild(t);
oSelect.appendChild(oOption);

var oOption1 = document.createElement("option");
var t = document.createTextNode("Fessari");
oOption1.setAttribute("value", 1);
oOption1.appendChild(t);
oSelect.appendChild(oOption1);
oSelect.onchange=function() {txtChange(this,pname,price);}

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

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);
}

function txtChange(obj,pname,price)
{
alert(obj.selectedIndex+" "+obj[obj.selectedIndex].text)
var elt=obj[obj.selectedIndex].text
return obj;
}

</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 value=elt>
<input type="hidden" name=pName value= pname.value >
<input type="hidden" name=price value=price.value>
<input type="hidden" name=pQty value=qty.value>
<input type="hidden" name=SKU value=sku.value>
<input type="hidden" name=UPC value=upc.value>
<br> <input type="submit" name="btnSubmit" value="Submit Order">
</form>
</body>
</html>

in my <body> tag how can i get the pname value,qty value which is built by dhtml

thanks in advance
nandoo
Plz its really Urgent
i m trying hard in each and every step but still i m not able to finish bcoz of less xperience in web developing plz

Kor

05-03-2005, 08:57 AM

There is no difference between the HTML form's elements and the DOM created form's elements, so that you may get the values in the same old classical way

document.forms['nameorindex'].elements['nameorindex'].value

nandoo

05-03-2005, 12:04 PM

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

<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>

Kor

05-03-2005, 02:04 PM

to be collected and sent to the next place

? Which is the next place? On the other hand, you should try avoid naming the objects the same word as their names.

nandoo

05-04-2005, 05:06 AM

Hi KOR,
Sorry to disturb u again.BUt i have no other way since i am not that much familiar with DOM& DHTML
Now i have made whatever changes u told but i am not able to get the values in the hidden fields pName,price,pQty,SKU,UPC.
Last 1 week i m struggling with this problem.
I want to send this product item detail wholly to the jsp page and from there i am going to use in webmethods developer service.

<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);
oSelect.onchange=function(){ txtChange(this); }

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

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

var prodqty=document.createElement("input");
prodqty.type="text";
prodqty.value="product quantity";
prodqty.name="prqty";

var prodsku=document.createElement("input");
prodsku.type="text";
prodsku.value="product SKU";
prodsku.name="prsku";

var produpc=document.createElement("input");
produpc.type="text";
produpc.value="product UPC";
produpc.name="prupc";

td.appendChild(oSelect);
td.appendChild(prodname);
td.appendChild(prodprice);
td.appendChild(prodqty);
td.appendChild(prodsku);
td.appendChild(produpc);
}

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)
{
var pName = elementOfName(obj.parentNode, "prname");
var tprice = elementOfName(obj.parentNode, "prprice");
var tqty = elementOfName(obj.parentNode, "prqty");
var tsku = elementOfName(obj.parentNode, "prsku");
var tupc = elementOfName(obj.parentNode, "prupc");
var elt=obj[obj.selectedIndex].text;

}
</script>
</head>
<body bgcolor=white>
<%@ taglib uri="http://webm-taglib.tld" prefix="webm" %>
<FORM ACTION=http://10.200.13.83:5555/invoke/app/flowDList 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>
<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>

Kor

05-04-2005, 09:11 AM

i am not able to get the values in the hidden fields
maybe we speak different English... To get? Or maybe you want to put the new created elements' values in the hidden fields?.. You dizzled me.... What you want to do?

nandoo

05-04-2005, 09:16 AM

ys exactly
to put into the hidden list
got it

Kor

05-04-2005, 09:20 AM

Let me ask you something... Why you need to give hidden fields the values of the correspondent new created fields? What's the use?

nandoo

05-04-2005, 09:48 AM

ok KOR no problem i got my work done
thank you for your cooperation so far
c u
nandoo :thumbsup: