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