JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: Apr 2005
Posts: 14
Reputation: nandoo is an unknown quantity at this point 
Solved Threads: 0
nandoo nandoo is offline Offline
Newbie Poster

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

 
0
  #1
May 2nd, 2005
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">

<script type="text/javascript">
function appendtable()
{
var div = document.getElementById("divide");
var ControlsDesign = document.createElement("div");

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 type="text/css">
<!--
/* cascading style sheet */

-->
</style>

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

</body>
</html>


thanks in advance....
nandoo
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Urgent.....Dynamic Changes....

 
0
  #2
May 3rd, 2005
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. <title>DOM form elements</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.  
  8. <script type="text/javascript">
  9. var rowCount = 0;
  10.  
  11. function appendtable(){
  12.  
  13. 	// get html elements
  14. 	var divElement   = document.getElementById("divide");
  15.  
  16. 	// create a new table each time.
  17. 	var tableElement = document.createElement("table");
  18.  
  19. 	// create new row and cells
  20. 	var newTr 	= document.createElement("tr");
  21. 	var td0 	= document.createElement("td");
  22. 	var td1 	= document.createElement("td");
  23. 	var td2 	= document.createElement("td");
  24. 	var td3 	= document.createElement("td");
  25.  
  26. 	// create new select
  27. 	var oSelect	= document.createElement("select");
  28.  
  29. 	// set onchange event for select box
  30. 	oSelect.setAttribute("onchange", "txtChange(this);");
  31.  
  32. 	// keep track of the id of the object for interest.
  33. 	oSelect.setAttribute("id", "txtchange" + rowCount++);
  34.  
  35. 	// create and add new option 0
  36. 	var oOption0 = document.createElement("OPTION");
  37. 	var t0 = document.createTextNode("Ferrari");
  38. 	oOption0.setAttribute("value", 4);
  39. 	oOption0.appendChild(t0);
  40. 	oSelect.appendChild(oOption0);
  41.  
  42. 	// create and add new option 1
  43. 	var oOption1 = document.createElement("OPTION");
  44. 	var t1 = document.createTextNode("Fessari");
  45. 	oOption1.setAttribute("value", 3);
  46. 	oOption1.appendChild(t1);
  47. 	oSelect.appendChild(oOption1);
  48.  
  49. 	// cretae text elements
  50. 	var txt1 = document.createElement("input");
  51. 	txt1.type="text";
  52. 	txt1.value="mamu";	
  53. 	var txt2=document.createElement("input");
  54. 	txt2.type="text";
  55. 	txt2.value="Machan";	
  56. 	var txt3=document.createElement("input");
  57. 	txt3.type="text";
  58. 	txt3.value="maplai";
  59.  
  60. 	// add content to the table.
  61. 	td0.appendChild(oSelect);	
  62. 	td1.appendChild(txt1);
  63. 	td2.appendChild(txt2);
  64. 	td3.appendChild(txt3);
  65. 	newTr.appendChild(td0);
  66. 	newTr.appendChild(td1);
  67. 	newTr.appendChild(td2);
  68. 	newTr.appendChild(td3);
  69. 	tableElement.appendChild(newTr);
  70. 	divElement.appendChild(tableElement);
  71.  
  72. 	// only need to do this ugly hack for Internet Explorer.... don't know why. never had to do this with dynamic nodes before
  73. 	// must be some bug i have missed.
  74. 	if(window.event) {
  75. 		document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;
  76. 	}
  77. }
  78.  
  79. // function requires a node object.
  80. function txtChange(noden) {
  81. 	alert("hi: '" + (noden?noden.id:"node is null") + "'");
  82.  
  83. 	var di = document.getElementsByTagName("select");
  84. 	//when i tried to get the selected value its showing error.
  85. 	// tag name function returns a node list.. not a single node.. so if only one,
  86. 	// then access using di.item(0)
  87.  
  88. 	// however using my code changes, there is no reason to establish the node here, as it is
  89. 	// being passed in as a parameter.
  90.  
  91.  
  92. }
  93. </script>
  94.  
  95. <style type="text/css">
  96. <!--
  97. /* cascading style sheet */
  98. body { font-family:verdana; }
  99. -->
  100. </style>
  101.  
  102. </head>
  103. <body>
  104.  
  105. <div id="divide">
  106.  
  107. <input type="button" onclick="appendtable()" value="Press me">
  108.  
  109. </div>
  110.  
  111. </body>
  112. </html>

enjoy.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2005
Posts: 14
Reputation: nandoo is an unknown quantity at this point 
Solved Threads: 0
nandoo nandoo is offline Offline
Newbie Poster

Re: Urgent.....Dynamic Changes....

 
0
  #3
May 3rd, 2005
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
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Urgent.....Dynamic Changes....

 
0
  #4
May 3rd, 2005
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
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Urgent.....Dynamic Changes....

 
0
  #5
May 3rd, 2005
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
Last edited by alpha_foobar; May 3rd, 2005 at 6:27 am. Reason: spelling
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Urgent.....Dynamic Changes....

 
0
  #6
May 3rd, 2005
whoop... here you go... the changes:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. <html>
  3. <head>
  4. <title> working with jscript</title>
  5. <script type="text/javascript">
  6. <!--
  7. function appendtable(){
  8. 	var parent = document.getElementById("divide");
  9. 	var div = document.createElement("div");
  10.  
  11. 	var tbl = div.appendChild(document.createElement("table"));
  12. 	var tb = tbl.appendChild(document.createElement("tbody"));
  13. 	var tr = tb.appendChild(document.createElement("tr"));
  14. 	var td = tr.appendChild(document.createElement("td"));
  15.  
  16. 	parent.appendChild(div);
  17.  
  18. 	var oSelect=document.createElement("select");
  19. 	var oOption = document.createElement("option");
  20. 	var t0 = document.createTextNode("Ferrari");
  21. 	oOption.setAttribute("value", 0);
  22. 	oOption.appendChild(t0);
  23. 	oSelect.appendChild(oOption);
  24.  
  25. 	var oOption1 = document.createElement("option");
  26. 	var t1 = document.createTextNode("Fessari");
  27. 	oOption1.setAttribute("value", 1);
  28. 	oOption1.appendChild(t1);
  29. 	oSelect.appendChild(oOption1);
  30. 	oSelect.onchange=function(){ txtChange(this); }
  31.  
  32. 	var pname=document.createElement("input");
  33. 	pname.type="text";
  34. 	pname.value="product name"
  35. 	pname.name = "pname";
  36.  
  37. 	var price=document.createElement("input");
  38. 	price.type="text";
  39. 	price.value="product price"
  40.  
  41. 	var qty=document.createElement("input");
  42. 	qty.type="text";
  43. 	qty.value="product quantity"
  44.  
  45. 	var sku=document.createElement("input");
  46. 	sku.type="text";
  47. 	sku.value="product SKU"
  48.  
  49. 	var upc=document.createElement("input");
  50. 	upc.type="text";
  51. 	upc.value="product UPC"
  52.  
  53. 	td.appendChild(oSelect);
  54. 	td.appendChild(pname);
  55. 	td.appendChild(price);
  56. 	td.appendChild(qty);
  57. 	td.appendChild(sku);
  58. 	td.appendChild(upc);
  59. }
  60.  
  61. // get element with name from parent node...
  62. function elementOfName(parentNode, name){
  63. 	var nodeList = parentNode.getElementsByTagName("INPUT");
  64. 	for(var i=0; i<nodeList.length; i++){
  65. 		if(nodeList.item(i).name == name){
  66. 			return nodeList.item(i);
  67. 		}
  68. 	}
  69. 	return null;
  70. }
  71.  
  72. function txtChange(obj){
  73. 	var pname = elementOfName(obj.parentNode, "pname");
  74. 	if(pname) alert(pname.value);
  75. 	alert(obj.selectedIndex+" "+obj[obj.selectedIndex].text)
  76. 	var elt=obj[obj.selectedIndex].text;
  77.  
  78. 	// set values of hidden elements here:
  79. 	elementOfName(document, "pId").value = elt.value;
  80.  
  81. 	// ... etc
  82. }
  83. -->
  84. </script>
  85. </head>
  86. <body bgcolor=white>
  87.  
  88. <FORM ACTION=DList.html METHOD=POST>
  89. Purchase Order ID <input type="text" name="poId"><br>
  90. Sendor Address <input type="text" name="senderAddress"><br>
  91. Vendor Address <input type="text" name="vendorAddress"><br>
  92. poStatus <input type="text" name="poStatus"><br>
  93. poDate <input type="text" name="poDate"><br>
  94. expDate <input type="text" name="expDate"><br><br>
  95. <h4> Product Details</h4>
  96. <input type="button" onclick="appendtable()" value="Add Product">
  97. <div id="divide"></div>
  98. <input type="hidden" name=pId value=elt>
  99. <input type="hidden" name=pName>
  100. <input type="hidden" name=price>
  101. <input type="hidden" name=pQty value=qty.value>
  102. <input type="hidden" name=SKU value=sku.value>
  103. <input type="hidden" name=UPC value=upc.value>
  104. <br> <input type="submit" name="btnSubmit" value="Submit Order">
  105. </form>
  106. </body>
  107. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2005
Posts: 14
Reputation: nandoo is an unknown quantity at this point 
Solved Threads: 0
nandoo nandoo is offline Offline
Newbie Poster

Re: Urgent.....Dynamic Changes....

 
0
  #7
May 3rd, 2005
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


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <title> working with jscript</title>
  4. <script type="text/javascript">
  5. function appendtable()
  6. {
  7. 	var parent = document.getElementById("divide");
  8. 	var div = document.createElement("div");
  9.  
  10. 	var tbl = div.appendChild(document.createElement("table"));
  11. 	var tb = tbl.appendChild(document.createElement("tbody"));
  12. 	var tr = tb.appendChild(document.createElement("tr"));
  13. 	var td = tr.appendChild(document.createElement("td"));
  14.  
  15. 	parent.appendChild(div);
  16.  
  17. 	var oSelect=document.createElement("select");
  18. 	var oOption = document.createElement("option");
  19. 	var t0 = document.createTextNode("Ferrari");
  20. 	oOption.setAttribute("value", 0);
  21. 	oOption.appendChild(t0);
  22. 	oSelect.appendChild(oOption);
  23.  
  24. 	var oOption1 = document.createElement("option");
  25. 	var t1 = document.createTextNode("Fessari");
  26. 	oOption1.setAttribute("value", 1);
  27. 	oOption1.appendChild(t1);
  28. 	oSelect.appendChild(oOption1);
  29.  
  30.  
  31. 	var pname=document.createElement("input");
  32. 	pname.type="text";
  33. 	pname.value="product name"
  34. 	pname.name = "pname";
  35.  
  36. 	var price=document.createElement("input");
  37. 	price.type="text";
  38. 	price.value="product price"
  39.  
  40. 	var qty=document.createElement("input");
  41. 	qty.type="text";
  42. 	qty.value="product quantity"
  43.  
  44. 	var sku=document.createElement("input");
  45. 	sku.type="text";
  46. 	sku.value="product SKU"
  47.  
  48. 	var upc=document.createElement("input");
  49. 	upc.type="text";
  50. 	upc.value="product UPC"
  51.  
  52. 	td.appendChild(oSelect);
  53. 	td.appendChild(pname);
  54. 	td.appendChild(price);
  55. 	td.appendChild(qty);
  56. 	td.appendChild(sku);
  57. 	td.appendChild(upc);
  58.                   oSelect.onchange=function(){ txtChange(this,pname,price,qty,sku,upc); }
  59. }
  60.  
  61. // get element with name from parent node...
  62. function elementOfName(parentNode, name){
  63. 	var nodeList = parentNode.getElementsByTagName("INPUT");
  64. 	for(var i=0; i<nodeList.length; i++){
  65. 		if(nodeList.item(i).name == name){
  66. 			return nodeList.item(i);
  67. 		}
  68. 	}
  69. 	return null;
  70. }
  71.  
  72. function txtChange(obj,pname,price,qty,sku,upc){
  73.  
  74.                   var pname = elementOfName(obj.parentNode, "pname");
  75. 	//var price = elementOfName(obj.parentNode, "price");
  76.                  	var pQty = elementOfName(obj.parentNode, "qty");
  77.                  	var SKU = elementOfName(obj.parentNode, "price");
  78.                  	var UPC = elementOfName(obj.parentNode, "qty");// this is not working i dont know why....
  79.  
  80.  
  81. }
  82. </script>
  83. </head>
  84. <body bgcolor=white>
  85.  
  86.   <FORM ACTION=dlist.html METHOD=POST>
  87. Purchase Order ID <input type="text" name="poId"><br>
  88. Sendor Address <input type="text" name="senderAddress"><br>
  89. Vendor Address <input type="text" name="vendorAddress"><br>
  90. poStatus <input type="text" name="poStatus"><br>
  91. poDate <input type="text" name="poDate"><br>
  92. expDate <input type="text" name="expDate"><br><br>
  93. <h4> Product Details</h4>
  94. <input type="button" onclick="appendtable()" value="Add Product">
  95. <div id="divide"></div>
  96. <input type="hidden" name=pId>//here i m sending eachand every product to submitted into the next page 
  97. <input type="hidden" name=pName>
  98. <input type="hidden" name=price>
  99. <input type="hidden" name=pQty>
  100. <input type="hidden" name=SKU>
  101. <input type="hidden" name=UPC>
  102. <br> <input type="submit" name="btnSubmit" value="Submit Order">
  103. </form>
  104. </body>
  105. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Urgent.....Dynamic Changes....

 
0
  #8
May 3rd, 2005
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2005
Posts: 14
Reputation: nandoo is an unknown quantity at this point 
Solved Threads: 0
nandoo nandoo is offline Offline
Newbie Poster

Re: Urgent.....Dynamic Changes....

 
0
  #9
May 4th, 2005
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.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <title> working with jscript</title>
  4. <script type="text/javascript">
  5. function appendtable()
  6. {
  7. 	var parent = document.getElementById("divide");
  8. 	var div = document.createElement("div");
  9.  
  10. 	var tbl = div.appendChild(document.createElement("table"));
  11. 	var tb = tbl.appendChild(document.createElement("tbody"));
  12. 	var tr = tb.appendChild(document.createElement("tr"));
  13. 	var td = tr.appendChild(document.createElement("td"));
  14.  
  15. 	parent.appendChild(div);
  16.  
  17. 	var oSelect=document.createElement("select");
  18. 	var oOption = document.createElement("option");
  19. 	var t0 = document.createTextNode("Ferrari");
  20. 	oOption.setAttribute("value", 0);
  21. 	oOption.appendChild(t0);
  22. 	oSelect.appendChild(oOption);
  23.  
  24. 	var oOption1 = document.createElement("option");
  25. 	var t1 = document.createTextNode("Fessari");
  26. 	oOption1.setAttribute("value", 1);
  27. 	oOption1.appendChild(t1);
  28. 	oSelect.appendChild(oOption1);
  29. 	oSelect.onchange=function(){ txtChange(this); }
  30.  
  31. 	var prodname=document.createElement("input");
  32. 	prodname.type="text";
  33. 	prodname.value="product name";
  34. 	prodname.name = "prname";
  35.  
  36. 	var prodprice=document.createElement("input");
  37. 	prodprice.type="text";
  38. 	prodprice.value="product price";
  39.                   prodprice.name="prprice";                   
  40.  
  41. 	var prodqty=document.createElement("input");
  42. 	prodqty.type="text";
  43. 	prodqty.value="product quantity";
  44.             	prodqty.name="prqty";
  45.  
  46. 	var prodsku=document.createElement("input");
  47. 	prodsku.type="text";
  48. 	prodsku.value="product SKU";
  49.                   prodsku.name="prsku";	
  50.  
  51. 	var produpc=document.createElement("input");
  52. 	produpc.type="text";
  53. 	produpc.value="product UPC";
  54.                   produpc.name="prupc"; 
  55.  
  56. 	td.appendChild(oSelect);
  57. 	td.appendChild(prodname);
  58. 	td.appendChild(prodprice);
  59. 	td.appendChild(prodqty);
  60. 	td.appendChild(prodsku);
  61. 	td.appendChild(produpc);
  62. }
  63.  
  64.  
  65. function elementOfName(parentNode, name)
  66. {
  67. 	var nodeList = parentNode.getElementsByTagName("INPUT");
  68. 	for(var i=0; i<nodeList.length; i++)
  69.                   {
  70. 		if(nodeList.item(i).name == name)
  71.                                     {
  72. 			return nodeList.item(i);
  73. 		}
  74. 	}
  75. 	return null;
  76. }
  77.  
  78. function txtChange(obj)
  79. {
  80. 	var pName = elementOfName(obj.parentNode, "prname");
  81.                   var tprice = elementOfName(obj.parentNode, "prprice");
  82.                   var tqty = elementOfName(obj.parentNode, "prqty");
  83. 	var tsku = elementOfName(obj.parentNode, "prsku");
  84. 	var tupc = elementOfName(obj.parentNode, "prupc");
  85. 	var elt=obj[obj.selectedIndex].text;
  86.  
  87.  
  88.  
  89. }
  90. </script>
  91. </head>
  92. <body bgcolor=white>
  93.   <%@ taglib uri="http://webm-taglib.tld" prefix="webm" %>
  94.   <FORM ACTION=http://10.200.13.83:5555/invoke/app/flowDList METHOD=POST>
  95. Purchase Order ID <input type="text" name="poId"><br>
  96. Sendor Address <input type="text" name="senderAddress"><br>
  97. Vendor Address <input type="text" name="vendorAddress"><br>
  98. poStatus <input type="text" name="poStatus"><br>
  99. poDate <input type="text" name="poDate"><br>
  100. expDate <input type="text" name="expDate"><br><br>
  101. <h4> Product Details</h4>
  102. <input type="button" onclick="appendtable()" value="Add Product">
  103. <div id="divide"></div>
  104. <input type="hidden" name=pId>
  105. <input type="hidden" name=pName>
  106. <input type="hidden" name=price>
  107. <input type="hidden" name=pQty >
  108. <input type="hidden" name=SKU >
  109. <input type="hidden" name=UPC >
  110. <br> <input type="submit" name="btnSubmit" value="Submit Order">
  111. </form>
  112. </body>
  113. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Urgent.....Dynamic Changes....

 
0
  #10
May 4th, 2005
Well its easy now...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. 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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. <input type="hidden" name='pName' id="pName">

then you can do this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. document.getElementById("pName").value = elementOfName(obj.parentNode, "prname").value;
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array beta browser captchaformproblem cart child class close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index java javascript javascripthelp2020 jquery jsf jsp jump libcurl listbox maps masterpage math media menu mp4 object onerror onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype rated rating redirect safari scale scriptlets scroll search security select software star starrating stars synchronous toggle unicode variables w3c web webservice \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC