By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,822 Members | 1,054 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,822 IT Pros & Developers. It's quick & easy.

Variable not Accepted as Object

P: 8
Hi,
I have a javaScript bug in the following html file.
The file initially containts a row of with text boxes and select box.
When the cursor moves out of the last text box, it will create another
row with same type with exception of select box.
Here i am using javascript to populate the select box with same values as
that of first select box. I wrote the code for that, but it's giving error
at the line number 41.

The main problem is it is not accepting variable listName at line number 47,
as an object at line number 54.
If i comment line 54 and uncomment line 53, it works fine.
How do i make the line number 54 work fine, so that when i add new rows
they will be populated as that of first row.

please reply to following mail id.
**** Email removed

The html file is as follows.



[HTML]<HTML>
<HEAD>
<TITLE> Receipts </TITLE>

<SCRIPT language="JavaScript">
var numOfLines = 2;
function generateRow()
{
//if (window.event.keyCode == 9)
{
//alert(window.event.keyCode);
var d=document.getElementById("row");
d.innerHTML += "<TD>&nbsp<input type='text' name='sNo"+numOfLines+"' size='5' VALUE='"+numOfLines+"'>&nbsp</TD>";

d.innerHTML += "<TD><input type='text' name='material"+numOfLines+"' size='6'>&nbsp&nbsp</TD>";

d.innerHTML += "<TD><SELECT name='matName"+numOfLines+"'><OPTION VALUE='Select'>Select</OPTION></SELECT>&nbsp</TD>";

d.innerHTML += "<TD><input type='text' name='qty"+numOfLines+"' size='10'>&nbsp</TD>";

d.innerHTML += "<TD><input type='text' name='rate"+numOfLines+"' size='10'>&nbsp</TD>";

d.innerHTML += "<TD><input type='text' name='amt"+numOfLines+"' size='15' onBlur='generateRow()'>&nbsp</TD><br>";

addOption_list();

//var felementVal = "quantity"+numOfLines;

//var felement = eval("document.forms[0].material"+numOfLines);
//felement.focus();
//felement.focus();
numOfLines += 1;
}
}

function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}

function addOption_list()
{
var optLength = document.forms[0].matName1.options.length;
var listName = new String("matName"+numOfLines);
alert("List name :"+listName);
for (var i=0; i < optLength;++i)
{
var optText = document.forms[0].matName1.options[i].text;
var optValue = document.forms[0].matName1.options[i].value;
//var listLocation = document.forms[0].matName2;
var listLocation = document.forms[0].listName;
addOption(listLocation,optText, optValue);
}
}

</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TABLE align=center>
<TR align="center"><TD><B>S.No.</B></TD><TD><B>Material#</B></TD><TD><B>Material Name</B> </TD><TD><B>Quantity</B></TD><TD><B>Rate</B></TD><TD><B>Amount</B></TD></TR>

<TR><TD><B><INPUT TYPE="text" NAME="sNo1" size=5></B></TD><TD><B><INPUT TYPE="text" NAME="material1" size=6></B></TD>
<TD>
<SELECT NAME="matName1">
<OPTION VALUE="AP">AP</OPTION>
<OPTION VALUE="AP">BP</OPTION>
<OPTION VALUE="AP">CP</OPTION>
<OPTION VALUE="AP">DP</OPTION>
<OPTION VALUE="AP">EP</OPTION>
<OPTION VALUE="AP">FP</OPTION>
</SELECT>
</TD>
<TD><B><INPUT TYPE="text" NAME="qty1" size=10></B></TD><TD><B><INPUT TYPE="text" NAME="rate1" size=10></B></TD><TD><B><INPUT TYPE="text" NAME="amt1" size=15 onBlur="generateRow()"></B></TD></TR>
</TABLE>
<div align="center" id="row"></div>

</FORM>
</BODY>
</HTML>[/HTML]
Feb 21 '07 #1
Share this Question
Share on Google+
5 Replies

100+
P: 210
It says that selectbox has no properties. This is correct because on line 54 you are passing it document.forms[0].listName, which doesn't exist.
Feb 21 '07 #2

P: 12
Hi,

Personally I would change the code of the addOption_list function to be the following:
Expand|Select|Wrap|Line Numbers
  1. function addOption_list() 
  2. {
  3.     var HTML;
  4.    var optLength = document.forms[0].matName1.options.length;
  5.     var listName = new String("matName"+numOfLines);
  6.     alert("List name :"+listName);
  7.     HTML = '<SELECT NAME="' + listName + '">';
  8.     for (var i=0; i < optLength;++i)
  9.     {
  10.         var optText = document.forms[0].matName1.options[i].text;
  11.         var optValue = document.forms[0].matName1.options[i].value;
  12.         HTML += '<OPTION VALUE="' + optValue + '">' + optText + '</OPTION>';
  13.     }
  14.     HTML += '</SELECT>';
  15.     addOption_list = HTML;
  16. }
  17.  
Now you can alter line 25 of your original code to be:
Expand|Select|Wrap|Line Numbers
  1. d.innerHTML += addOption_list();
  2.  
Doing this makes your addOption function useless, so this one can be removed...

Hope this helps!

Cheers,
Arno
Feb 21 '07 #3

100+
P: 210
It says that selectbox has no properties. This is correct because on line 54 you are passing it document.forms[0].listName, which doesn't exist.
To create form elements you must use DOM methods, otherwise they do not become addressable
Feb 21 '07 #4

acoder
Expert Mod 15k+
P: 16,027
Use the DOM methods, e.g.
Expand|Select|Wrap|Line Numbers
  1. var listname = document.createElement('select');
  2. sel.name = 'matName' + numOfLines;
then append this to an element (in this case a table cell, though you'd have to give an id to the table cell).
Feb 21 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Title changed.
Feb 22 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.