Member Avatar for realnsleo

hi,
Am developing a web app in
php, mysql but using lots of javascript and ajax and css. okay.
straight to the code. I am adding dynamic textfields to the document.
There are 4 textfields in total. One of them has 'Quantity', the other
has "Item Decsription", the next has "Rate" and the last amount.

I added an 'onblur' event on the rate textfield so that javascript
automatically gets the rate and quantity and put a value in the amount
textfield.

but when i try to access the 'amount' textfield it says null yet its
supposed to be somethin like [object HTMLSelectElement]

i just dont seem to be accessing any elements after adding them
dynamically. This is the code am using: PLEASE HELP ME.. thank U

CODE

i call the function addNewItem from the document.
the variables id,count,quantity and ps come from a php script from a
popup window so that some fields are already populated with the
quantity(qty) and item(ps)

function addNewItem(id,count,qty,ps){
       var count = parseInt(count);
       var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
   var row = document.createElement("TR")

       //1st Column
       var td1 = document.createElement("TD")
       td1.setAttribute("align","center");
       td1.setAttribute("height",40);
       td1.setAttribute("bgcolor","#FFFFFF");

       input1 = document.createElement("input");
       input1.setAttribute("type","text");
       input1.setAttribute("name","qty_"+count);
       input1.setAttribute("size",3);
       input1.setAttribute("disabled","disabled");
       input1.setAttribute("style","background-color:#FFFFFF;border:none;color:#000000;text-align:center;");
       input1.setAttribute("value",qty);

       //2nd Column
       var td2 = document.createElement("TD")
       td2.setAttribute("align","center");
       td2.setAttribute("bgcolor","#FFFFFF");

       input2 = document.createElement("input");
       input2.setAttribute("type","text");
       input2.setAttribute("name","ps_"+count);
       input2.setAttribute("size",70);
       input2.setAttribute("disabled","disabled");
       input2.setAttribute("style","background-color:#FFFFFF;border:none;color:#000000;text-align:center;");
       input2.setAttribute("value",ps);

       //3rd Column - Rate
       var td3 = document.createElement("TD")
       td3.setAttribute("align","center");
       td3.setAttribute("bgcolor","#FFFFFF");

       input3 = document.createElement("input");
       input3.setAttribute("type","text");
       input3.setAttribute("name","rate_"+count);
       input3.setAttribute("style","color:#00FFFF;");
       input3.setAttribute("onblur","javascript:calc(this.value,"+qty+",'amt_"+count+"')");
  //this is where i call the onblur

       //4th Column - Amount
       var td4 = document.createElement("TD")
       td4.setAttribute("align","center");
       td4.setAttribute("bgcolor","#FFFFFF");

       input4 = document.createElement("input");
       input4.setAttribute("type","text");
       input4.setAttribute("name","amt_"+count);
       input4.setAttribute("style","color:#000000;background-color:#FFFFFF;border:none;");


       //Adding Elements
       td1.appendChild(input1);
       td2.appendChild(input2);
       td3.appendChild(input3);
       td4.appendChild(input4);


       //Adding Colums
       row.appendChild(td1);
   row.appendChild(td2);
       row.appendChild(td3);
       row.appendChild(td4);


       //Adding Rows
   tbody.appendChild(row);
}

function calc(rate,qty,amount){   //amount is supposed to be the id of
the amount textfield
       //Now we know the text fields, lets do some dynamic calculations!!
       //get the rate
       var rate = parseFloat(rate)
       var qty = parseFloat(qty);

       //multiply the figures
       var tt = rate*qty;

       //put the final figure into the 'amount' textfield
       var o = document.getElementById(amount');
       o.value = tt;

}

i hope i have explained well .. lol .. i look forward to the reply. Thank YOU!!!

  • 2 Contributors
  • 1 Reply
  • 94 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by cubekid
Member Avatar for cubekid

I have revised your code just a little

function addNewItem (id,count,qty,ps)
{
var count = parseInt(count);
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")

//1st Column
var td1 = document.createElement("TD")
td1.setAttribute("align","center");
td1.setAttribute("height",40);
td1.setAttribute("bgcolor","#FFFFFF");
input1 = document.createElement("input");
input1.setAttribute("type","text");
input1.setAttribute("name","qty_"+count);
input1.setAttribute("size",3);
input1.setAttribute("disabled","disabled");
input1.setAttribute("style","background-color:#FFFFFF;border:none;color:#000000;text-align:center;");
input1.setAttribute("value",qty);

//2nd Column
var td2 = document.createElement("TD")
td2.setAttribute("align","center");
td2.setAttribute("bgcolor","#FFFFFF");

input2 = document.createElement("input");
input2.setAttribute("type","text");
input2.setAttribute("name","ps_"+count);
input2.setAttribute("size",70);
input2.setAttribute("disabled","disabled");
input2.setAttribute("style","background-color:#FFFFFF;border:none;color:#000000;text-align:center;");
input2.setAttribute("value",ps);

//3rd Column - Rate
var td3 = document.createElement("TD")
td3.setAttribute("align","center");
td3.setAttribute("bgcolor","#FFFFFF");

input3 = document.createElement("input");
input3.setAttribute("type","text");
input3.setAttribute("name","rate_"+count);
input3.setAttribute("style","color:#00FFFF;");
// previous code
//input3.setAttribute("onblur","javascript<B itxtvisited="1"></B>:calc(this.value,"+qty+",'amt_"+count+"')");

// this is where i call the onblur
// Revised by me
// What you have created -- summary only
// <tbody>
//	 <tr>
//		<td name="td1"><input name="input1"></td>
//		<td name="td2"><input name="input2"></td>
//		<td name="td3"><input name="input3"></td>
//		<td name="td4"><input name="input4"></td>
//	 </tr>
// </tbody>
//
// Explanation
// parentNode: go up to td3
// parentNode: go up to <tr> tag
// children[3]: go to td4
// children[0]: go to input4

input3.onblur = function()
{
var amountTextBox = this.parentNode.parentNode.children[3].children[0];
calc (this.value, qty, amountTextBox);
};			
// 4th Column - Amount
var td4 = document.createElement("TD")
td4.setAttribute("align","center");
td4.setAttribute("bgcolor","#FFFFFF");
input4 = document.createElement("input");
input4.setAttribute("type","text");
input4.setAttribute("name","amt_"+count);
input4.setAttribute("style","color:#000000;background-color:#FFFFFF;border:none;");

// Adding Elements
td1.appendChild(input1);
td2.appendChild(input2);
td3.appendChild(input3);
td4.appendChild(input4);
// Adding Colums
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
//Adding Rows
tbody.appendChild(row);
}

function calc (rate,qty,amount)
{
var rate = parseFloat(rate)
var qty = parseFloat(qty);
//multiply the figures
var tt = rate*qty;
//put the final figure into the 'amount' textfield
	
// previous code
// var o = document.getElementById(amount');			
var o = amount;
o.value = tt;
}

The possible problem that you have previously encountered is that you used getElementById but (amt_+"") is not set as ID but as name.

I hope this solves your problem

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.