PDA

View Full Version : Dhtml--->Dynamic Generation<--URGENT

nandoo
05-02-2005, 07:49 AM
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
iota
05-02-2005, 11:12 AM
Hi nandoo, :p

Study this site :

http://www10.brinkster.com/A1ien51/

You'll find a lot of amazing DHTML.
SpirtOfGrandeur
05-03-2005, 03:31 AM
Every thing is always urgent! *shrugs* O well. Luckily this made the top of my list ;) You need to do some reading up. You are taking advantage of IE remaking the table that you are generating by calling the .innerHTML lines and that is horrible practice. In the DOM, between table and tr, is tbody, thead, or tfoot. You need these so that it generates correctly. Also using text in an onchange event does not always (if ever) get the right results. Use what i have below.


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

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

var table_content = document.createElement("table");
var body_content = document.createElement("tbody");
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);


td.appendChild(txt1);
td.appendChild(txt2);
td.appendChild(txt3);
tr.appendChild(td);
body_content.appendChild(tr);
table_content.appendChild(body_content);
td_cd.appendChild(table_content);
tr_cd.appendChild(td_cd);
body_cd.appendChild(tr_cd);
table_cd.appendChild(body_cd);
ControlsDesign.appendChild(table_cd);
div.appendChild(ControlsDesign);
//document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;
//oSelect.onclick = function() { alert('Hello!'); }
oSelect.onchange = function() {
//alert('I am here!');
txtChange( this ) ;
}
}

function txtChange( obj ) {
//var di = document.getElementsByTagName("select");
alert(obj.selectedIndex);
//when i tried to get the selected value its showing error.
}
</script>
nandoo
05-03-2005, 08:42 AM
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
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