DaniWeb IT Discussion Community - Urgent.....Dynamic Changes....

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Urgent.....Dynamic Changes.... (http://www.daniweb.com/forums/thread22923.html)

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

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

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

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

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

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

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:

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

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

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