Urgent.....Dynamic Changes....

Question

nandoo 0 Newbie Poster

18 Years Ago

Hi,
This is Nandoo,new to webDeveloper.I want to make a script which should work in the following manner.
In my web page,I want to have a button(with name add).whenever i click that button it should generate a select list and also 3 text Fields.
Whenever i select the list items the text fields should change accordingly.
I am struggling for the past 4 days here since i m babe to WebDeveloping.
plz help me.. i have created the generation of selection List and also text fields.Now i need to change the text based on the selected items.
plz...

I dont know how to get the selection list in another javascript function so that i could change the values of the text boxes plz
i m a new guy ...reply me urgent plz

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM form elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

var table_cd = document.createElement("table");
var tr_cd = document.createElement("tr");
var td_cd = document.createElement("td");

var table_content = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");

var oSelect=document.createElement("select");
var oOption = document.createElement("OPTION");
var t = document.createTextNode("Ferrari");
oOption.setAttribute("value", 4);
oOption.appendChild(t);
oSelect.appendChild(oOption);

var oOption1 = document.createElement("OPTION");
var t = document.createTextNode("Fessari");
oOption1.setAttribute("value", 4);
oOption1.appendChild(t);
oSelect.appendChild(oOption1);

var txt1=document.createElement("input");
txt1.type="text";
txt1.value="mamu"

var txt2=document.createElement("input");
txt2.type="text";
txt2.value="Machan"

var txt3=document.createElement("input");
txt3.type="text";
txt3.value="maplai"

td.appendChild(oSelect);

oSelect.onchange="txtChange()";
td.appendChild(txt1);
td.appendChild(txt2);
td.appendChild(txt3);
tr.appendChild(td);
table_content.appendChild(tr);
td_cd.appendChild(table_content);
tr_cd.appendChild(td_cd);
table_cd.appendChild(tr_cd);
ControlsDesign.appendChild(table_cd);
div.appendChild(ControlsDesign);
document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;
}

function txtChange()
{
var di = document.getElementsByTagName("select");
//when i tried to get the selected value its showing error.
}
</script>

-->
</style>

</head>
<body>
<input type="button" onclick="appendtable()" value="Press me">
<div id="divide"></div>

</body>
</html>

thanks in advance....
nandoo

javascript

2 Contributors
15 Replies
742 Views
3 Days Discussion Span
Latest Post 18 Years Ago Latest Post by nandoo

All 15 Replies

alpha_foobar 5 Junior Poster

18 Years Ago

Hi,
I don' think you have worded your question very well. And I am not sure why you want to create this content in this manner (though perhaps its just POC and you'll reveal your true ideas later?).

Anyhow, I think that your problem is your understanding of the getElementByTagName function. This function returns a list of elements matching the argument name. In this case "SELECT". Even if there is only one such element, it will be returned in a list. So you'd need to retrieve it using the item method.. i.e. di.item(0).

I have edited your code, so I could get a feel for what you were after and how you were doing it. I think I've created something along the lines you were after, that is also a little simpler to read and follow.

It seemed sensible to me to pass the node that created the event as an argument to the function, this way you won't have to search for it when it gets there... apart from that; the only other difference is it runs in Mozilla as well... Which is a trend in almost all my code as Mozilla is much simpler to debug than IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM form elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var rowCount = 0;

function appendtable(){
	
	// get html elements
	var divElement   = document.getElementById("divide");
	
	// create a new table each time.
	var tableElement = document.createElement("table");
	
	// create new row and cells
	var newTr 	= document.createElement("tr");
	var td0 	= document.createElement("td");
	var td1 	= document.createElement("td");
	var td2 	= document.createElement("td");
	var td3 	= document.createElement("td");
	
	// create new select
	var oSelect	= document.createElement("select");
	
	// set onchange event for select box
	oSelect.setAttribute("onchange", "txtChange(this);");
	
	// keep track of the id of the object for interest.
	oSelect.setAttribute("id", "txtchange" + rowCount++);
	
	// create and add new option 0
	var oOption0 = document.createElement("OPTION");
	var t0 = document.createTextNode("Ferrari");
	oOption0.setAttribute("value", 4);
	oOption0.appendChild(t0);
	oSelect.appendChild(oOption0);
	
	// create and add new option 1
	var oOption1 = document.createElement("OPTION");
	var t1 = document.createTextNode("Fessari");
	oOption1.setAttribute("value", 3);
	oOption1.appendChild(t1);
	oSelect.appendChild(oOption1);
	
	// cretae text elements
	var txt1 = document.createElement("input");
	txt1.type="text";
	txt1.value="mamu";	
	var txt2=document.createElement("input");
	txt2.type="text";
	txt2.value="Machan";	
	var txt3=document.createElement("input");
	txt3.type="text";
	txt3.value="maplai";
	
	// add content to the table.
	td0.appendChild(oSelect);	
	td1.appendChild(txt1);
	td2.appendChild(txt2);
	td3.appendChild(txt3);
	newTr.appendChild(td0);
	newTr.appendChild(td1);
	newTr.appendChild(td2);
	newTr.appendChild(td3);
	tableElement.appendChild(newTr);
	divElement.appendChild(tableElement);
	
	// only need to do this ugly hack for Internet Explorer.... don't know why. never had to do this with dynamic nodes before
	// must be some bug i have missed.
	if(window.event) {
		document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;
	}
}

// function requires a node object.
function txtChange(noden) {
	alert("hi: '" + (noden?noden.id:"node is null") + "'");
	
	var di = document.getElementsByTagName("select");
	//when i tried to get the selected value its showing error.
	// tag name function returns a node list.. not a single node.. so if only one,
	// then access using di.item(0)
	
	// however using my code changes, there is no reason to establish the node here, as it is
	// being passed in as a parameter.
	
	
}
</script>

<style type="text/css">
<!--
/* cascading style sheet */
body { font-family:verdana; }
-->
</style>

</head>
<body>

<div id="divide">

<input type="button" onclick="appendtable()" value="Press me">

</div>

</body>
</html>

enjoy.

alpha_foobar 5 Junior Poster

18 Years Ago

Hey,
I like the use of the anonymous function pointer... does this work in Internet Explorer?

You should use the code block when your posting code in a post. It makes it easier to reasd and edit..

Checking it out now.
alpha_foobar

alpha_foobar 5 Junior Poster

18 Years Ago

ok, it makes a little more sense now...

I'm afraid I am working on linux here and only using mozilla, so any code I post will only be checked on Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.5) Gecko/20050110 Firefox/1.0 (Debian package 1.0+dfsg.1-2)

a couple pointers, if your checking for updates now:
[1] You need to set the value of the hidden fields in the txtChange function, you cannot assign them inline like this, a textfield will not update itself like this.
[2] I like you anonymous function, but it won't understand what the other arguments are when it gets called. It understands 'this', because it is called by a dom object that can be referred to that way.. it doesn't understand pname etc because those variables are out of scope.

... there will be more later.
alpha_foobar

alpha_foobar 5 Junior Poster

18 Years Ago

whoop... here you go... the changes:

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

// 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){
	var pname = elementOfName(obj.parentNode, "pname");
	if(pname) alert(pname.value);
	alert(obj.selectedIndex+" "+obj[obj.selectedIndex].text)
	var elt=obj[obj.selectedIndex].text;
	
	// set values of hidden elements here:
	elementOfName(document, "pId").value = elt.value;
	
	// ... etc
}
-->
</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>
<input type="hidden" name=price>
<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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

nandoo 0 Newbie Poster · Answer 1 · 2005-05-03T12:37:16+00:00

hi Foo,

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

nandoo 0 Newbie Poster · Answer 2 · 2005-05-03T17:13:38+00:00

help me fooBar
I tried your comments.But i am not getting the right solution what i need?
here i enclosed the 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>

alpha_foobar 5 Junior Poster · Answer 3 · 2005-05-03T17:47:27+00:00

Its not far from giving you what you want i think, you just missed that i gave pname a name attribute:

pname.name = "pname";

you'll need to do this with the other text boxes you'd like to extract as well.

ok, the other change is you'll need to remove all the parameters you added to the txtChange function, refer to my last posts. they are worthless (out of scope).

and you need to actually get the fields you want to assign a value to... otherwise how will they get the value?

you can use my elementOfName function.. just pass document and the name you want. faster would be using the elementById function.. but you'll need to give you input fields unique id's.

nandoo 0 Newbie Poster · Answer 4 · 2005-05-04T10:02:46+00:00

Hi fooBar,
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.

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

alpha_foobar 5 Junior Poster · Answer 5 · 2005-05-04T10:16:41+00:00

Well its easy now...

elementOfName(document, "pName").value  = elementOfName(obj.parentNode, "prname").value;

notice that you search the document node for the node with the name "pName", so this name needs to be unique.

A better way, would be to use the getElementyId function.. but this needs a unique id. i.e.

you'll need to this:

<input type="hidden" name='pName' id="pName">

then you can do this:

document.getElementById("pName").value = elementOfName(obj.parentNode, "prname").value;

alpha_foobar 5 Junior Poster · Answer 6 · 2005-05-04T10:17:52+00:00

Though I think you'd be surprised how much DOM you know now!

nandoo 0 Newbie Poster · Answer 7 · 2005-05-04T10:36:01+00:00

hi foo,

U know i m working webMethods Integration part.In that i need the jsp page to get the input of purchase order.thats the reason i m working in jsp.to get the product details i went in the way of DOM.
but now i finished the part in webMethods but jsp makes me to struggle here.i did the changes what u advices but still no result.
could u please look into it deeply
pleas thanks a lot..

<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)
{
	document.getElementById("pName").value = elementOfName(obj.parentNode, "prname").value;
                 document.getElementById("price").value = elementOfName(obj.parentNode, "prprice").value;
                  document.getElementById("pQty").value = elementOfName(obj.parentNode, "prqty").value;
                   document.getElementById("SKU").value = elementOfName(obj.parentNode, "prsku").value;
                  document.getElementById("UPC").value = elementOfName(obj.parentNode, "prupc").value;
	            
}
</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' id="pId">
<input type="hidden" name='pName' id="pName">
<input type="hidden" name='price' id="price">
<input type="hidden" name='pQty'  id="pQty">
<input type="hidden" name='SKU' id="SKU">
<input type="hidden" name='UPC' id="UPC">
<br> <input type="submit" name="btnSubmit" value="Submit Order">
</form>
</body>
</html>

alpha_foobar 5 Junior Poster · Answer 8 · 2005-05-04T11:27:37+00:00

I think the problem is my understanding of what you want to achieve. I don't see any problem with the result, from what I understand you are trying to do. Of course I can see why this would make any sense.

Oh and there is no reason to include a taglib here, your not using any JSP elements that I noticed...

Cheers,
alpha_foobar

nandoo 0 Newbie Poster · Answer 9 · 2005-05-04T11:50:44+00:00

foo,

Once again i will xplain the scenario.
i m working in business to bussiness integration tool.we just need the jsp form to get the user input and assign the retrived values into the integraion tool.
for that i need a purchase order format page,which should have the
purchase order header:
purchase-order_id
senderID
receiverID
postatus
podate
expdate
purchase order detail:
productID
productName
productPrice
productQuantity
productSKU
productUPC
the purchase order detail should be generated according to the user needs.
for example
if the user wants 2 product items to be purchased then the detail should generated as follows
productID 1
productName product1
productPrice 89
productQuantity 9
productSKU 678
productUPC 465

productID 2
productName product2
productPrice 890
productQuantity 49
productSKU 6738
productUPC 4635
but the purchase order header should be unique for both the product

purchase-order_id 123
senderID x
receiverID y
postatus open
podate 7/08/2005
expdate 9/08/2005
i dont know the number of items the user is going to order
for that reason i used DOM for dynamic field generation

is there any solution for this problem
please give me the solution

thanks a lot foo..

alpha_foobar 5 Junior Poster · Answer 10 · 2005-05-05T04:26:44+00:00

well, if you looked at the output forwarded to you, you would see that all the dynamically created dom objects send you a value. This value is an array if more that one field with the same name exist.

which is why I don't understand why you'd want to assign the value to your hidden fields... especially not in a manner where it is the last row a user selects that is associated (this seems to be of little use apart from an excellent way of showing how to traverse the DOM).

Here is the name value pairs I got from playing:

SKU='product SKU 3'
UPC='product UPC 3'
btnSubmit='Submit Order'
expDate=''
pId=''
pName='product name 3'
pQty='product quantity 3'
poDate=''
poId=''
poStatus=''
price='product price 3'
prname='product name 1','product name 2','product name 3'
prprice='product price 1','product price 2','product price 3'
prqty='product quantity 1','product quantity 2','product quantity 3'
prsku='product SKU 1','product SKU 2','product SKU 3'
prupc='product UPC 1','product UPC 2','product UPC 3'
senderAddress=''
vendorAddress=''

Now do you see my point? You haven't shown me any good reason for the hidden fields (yet).

nandoo 0 Newbie Poster · Answer 11 · 2005-05-05T09:18:42+00:00

yes foo

there is no need for hidden fields i have changed a code a littile bit and its working properly now.Thank you very much for your help.here is my code
sorry here is our code

<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 prodId=document.createElement("input");
	prodId.type="hidden";
	prodId.value="product Id";
                  prodId.name="pId"; 

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

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

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

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

	var produpc=document.createElement("input");
	produpc.type="text";
	produpc.value="product UPC";
                  produpc.name="UPC"; 
                           
	 td.appendChild(prodId);
	td.appendChild(oSelect);
	td.appendChild(prodname);
	td.appendChild(prodprice);
	td.appendChild(prodsku);
	td.appendChild(produpc);
                  oSelect.onchange=function(){ txtChange(this,prodname,prodprice,prodsku,produpc,prodId); }
                  td.appendChild(prodqty);
              
}

function txtChange(obj,prname,prprice,prsku,prupc,prId)
   {
          var  val=obj.selectedIndex;
          if (val==0)
                { 
                
                  prId.value=val;
                  prname.value=obj[val].text; 
                 prprice.value="2";
                 prsku.value="90";
                 prupc.value="70";
             
               }
          else
                {  
                   prId.value=val;
                   prname.value=obj[val].text; 
                    prprice.value="23";
                 prsku.value="903";
                 prupc.value="703";
                }
          
	            
}

</script>
</head>
<body bgcolor=black>
<%@ taglib uri="http://webm-taglib.tld" prefix="webm" %>
<FORM ACTION=http://10.200.13.83:5555/invoke/app/chkapp METHOD=POST>

<font color="#C12283"><h4>
<pre>
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></pre><br>
<h3> Product Details</h3>

<input type="button" onclick="appendtable()" value="Add Product"><br>
<pre>
<hr color=white>
 Product ID  Product Name   Product Price     Product SKU      Product UPC       Product Quantity</pre>
<div id="divide"></div>
<hr color=white>
<center>
<br> <input type="submit" name="btnSubmit" value="Submit Order"></center>
</font>
</form>


</body>
</html>

now i am moving to next level.
yes i want the selection list option values to be generated from the result set of oracle database.
since the selection list was generated using dom would there be any problem.?

Urgent.....Dynamic Changes....

Recommended Answers Collapse Answers

All 15 Replies

Recommended Answers