DaniWeb IT Discussion Community
1 2
Show 40 post(s) from this thread on one page

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)

nandoo May 2nd, 2005 1:05 am
Urgent.....Dynamic Changes....
 
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

alpha_foobar May 3rd, 2005 12:55 am
Re: Urgent.....Dynamic Changes....
 
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.

 

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

var rowCount = 0;



function appendtable(){

        

        // get html elements

        var divElement   = document.getElementById("divide");

        

        // create a new table each time.

        var tableElement = document.createElement("table");

        

        // create new row and cells

        var newTr         = document.createElement("tr");

        var td0         = document.createElement("td");

        var td1         = document.createElement("td");

        var td2         = document.createElement("td");

        var td3         = document.createElement("td");

        

        // create new select

        var oSelect        = document.createElement("select");

        

        // set onchange event for select box

        oSelect.setAttribute("onchange", "txtChange(this);");

        

        // keep track of the id of the object for interest.

        oSelect.setAttribute("id", "txtchange" + rowCount++);

        

        // create and add new option 0

        var oOption0 = document.createElement("OPTION");

        var t0 = document.createTextNode("Ferrari");

        oOption0.setAttribute("value", 4);

        oOption0.appendChild(t0);

        oSelect.appendChild(oOption0);

        

        // create and add new option 1

        var oOption1 = document.createElement("OPTION");

        var t1 = document.createTextNode("Fessari");

        oOption1.setAttribute("value", 3);

        oOption1.appendChild(t1);

        oSelect.appendChild(oOption1);

        

        // cretae text elements

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

        

        // add content to the table.

        td0.appendChild(oSelect);        

        td1.appendChild(txt1);

        td2.appendChild(txt2);

        td3.appendChild(txt3);

        newTr.appendChild(td0);

        newTr.appendChild(td1);

        newTr.appendChild(td2);

        newTr.appendChild(td3);

        tableElement.appendChild(newTr);

        divElement.appendChild(tableElement);

        

        // only need to do this ugly hack for Internet Explorer.... don't know why. never had to do this with dynamic nodes before

        // must be some bug i have missed.

        if(window.event) {

                document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;

        }

}



// function requires a node object.

function txtChange(noden) {

        alert("hi: '" + (noden?noden.id:"node is null") + "'");

        

        var di = document.getElementsByTagName("select");

        //when i tried to get the selected value its showing error.

        // tag name function returns a node list.. not a single node.. so if only one,

        // then access using di.item(0)

        

        // however using my code changes, there is no reason to establish the node here, as it is

        // being passed in as a parameter.

        

        

}

</script>



<style type="text/css">

<!--

/* cascading style sheet */

body { font-family:verdana; }

-->

</style>



</head>

<body>



<div id="divide">



<input type="button" onclick="appendtable()" value="Press me">



</div>



</body>

</html>

enjoy.

nandoo May 3rd, 2005 3:37 am
Re: Urgent.....Dynamic Changes....
 
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

alpha_foobar May 3rd, 2005 6:15 am
Re: Urgent.....Dynamic Changes....
 
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

alpha_foobar May 3rd, 2005 6:26 am
Re: Urgent.....Dynamic Changes....
 
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

alpha_foobar May 3rd, 2005 7:01 am
Re: Urgent.....Dynamic Changes....
 
whoop... here you go... the changes:
 

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

nandoo May 3rd, 2005 8:13 am
Re: Urgent.....Dynamic Changes....
 
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


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

                  oSelect.onchange=function(){ txtChange(this,pname,price,qty,sku,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,pname,price,qty,sku,upc){

        

                  var pname = elementOfName(obj.parentNode, "pname");

        //var price = elementOfName(obj.parentNode, "price");

                         var pQty = elementOfName(obj.parentNode, "qty");

                         var SKU = elementOfName(obj.parentNode, "price");

                         var UPC = elementOfName(obj.parentNode, "qty");// this is not working i dont know why....

          

        

}

</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>//here i m sending eachand every product to submitted into the next page 

<input type="hidden" name=pName>

<input type="hidden" name=price>

<input type="hidden" name=pQty>

<input type="hidden" name=SKU>

<input type="hidden" name=UPC>

<br> <input type="submit" name="btnSubmit" value="Submit Order">

</form>

</body>

</html>

alpha_foobar May 3rd, 2005 8:47 am
Re: Urgent.....Dynamic Changes....
 
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.

nandoo May 4th, 2005 1:02 am
Re: Urgent.....Dynamic Changes....
 
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.
<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)

{

        var pName = elementOfName(obj.parentNode, "prname");

                  var tprice = elementOfName(obj.parentNode, "prprice");

                  var tqty = elementOfName(obj.parentNode, "prqty");

        var tsku = elementOfName(obj.parentNode, "prsku");

        var tupc = elementOfName(obj.parentNode, "prupc");

        var elt=obj[obj.selectedIndex].text;

        

                    

        

}

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

<input type="hidden" name=pName>

<input type="hidden" name=price>

<input type="hidden" name=pQty >

<input type="hidden" name=SKU >

<input type="hidden" name=UPC >

<br> <input type="submit" name="btnSubmit" value="Submit Order">

</form>

</body>

</html>

alpha_foobar May 4th, 2005 1:16 am
Re: Urgent.....Dynamic Changes....
 
Well its easy now...



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:


<input type="hidden" name='pName' id="pName">

then you can do this:



document.getElementById("pName").value = elementOfName(obj.parentNode, "prname").value;


All times are GMT -4. The time now is 3:27 am.
1 2
Show 40 post(s) from this thread on one page

Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2009 DaniWeb® LLC