Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 7286

You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page

Permalink

May 4th, 2005

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

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

alpha_foobar

Reputation Points: 20

Solved Threads: 5

Junior Poster

Offline

182 posts
since May 2005

Permalink

May 4th, 2005

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

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

JavaScript / DHTML / AJAX Syntax (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);
	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>
<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>

nandoo

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Apr 2005

Permalink

May 4th, 2005

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

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

alpha_foobar

Reputation Points: 20

Solved Threads: 5

Junior Poster

Offline

182 posts
since May 2005

Permalink

May 4th, 2005

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

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

nandoo

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Apr 2005

Permalink

May 4th, 2005

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

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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=''
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).

alpha_foobar

Reputation Points: 20

Solved Threads: 5

Junior Poster

Offline

182 posts
since May 2005

Permalink

May 5th, 2005

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

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

JavaScript / DHTML / AJAX Syntax (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 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>
<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.?

nandoo

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Apr 2005

Previous
1
Page 2

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Creating Hit Counters for a website

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: In need of Menu over Frames

DaniWeb Message

Cancel Changes

User Name
Password