Referencing dynamically created form elements 2

Sarah555 · Oct 29, 2002

I have been through the FAQ and have been unable to come up with a solution for this problem. I need to access the value of the variable jdage.

Code:

document.write(&quot;<FORM NAME=&quot;clothing&quot;>&quot;);
var jdage = &quot;jdage&quot; + m;

document.write(&quot;<TABLE>&quot;);
document.write(&quot;<TR>&quot;);
document.write(&quot;<TD><INPUT NAME=&quot; + jdage + &quot; TYPE=\&quot;RADIO\&quot; VALUE=\&quot;toddler\&quot; CHECKED>Toddler</TD>&quot;);
document.write(&quot;<TD><INPUT NAME=&quot; + jdage + &quot; TYPE=\&quot;RADIO\&quot; VALUE=\&quot;youth\&quot;>Youth</TD>&quot;);
document.write(&quot;<TD><INPUT NAME=&quot; + jdage + &quot; TYPE=\&quot;RADIO\&quot; VALUE=\&quot;adult\&quot;>Adult</TD>&quot;);
document.write(&quot;</TR>&quot;);
document.write(&quot;</table>&quot;);
document.write(&quot;<BR>&quot;);
m++;

To validate the value of jdage I have created the following for loop:

Code:

for (a=0; a < 2; a++);
{	 
var amt = eval(&quot;document.clothing.&quot; + jdage[a] +&quot;.value&quot;);
eval(&quot;alert('The value of jdage is:  ' + amt)&quot;);
}

The error message I keep getting is that document.clothing.undefined.value is null or not an object.

Any help will be greatly appreciated!!!

Targol · Oct 30, 2002

Instead of

Code:

NAME=&quot; + jdage + &quot;...

, use

Code:

id=&quot; + jdage + &quot;...

Water is not bad as long as it stays out human body ;-)

xutopia · Oct 30, 2002

First I had many javascript errors testing your example in a page. m was not defined so jdage + m actually looked like this "jdageundefined". Try this :

var qsdf = "qdsf" + m;
alert(qsdf)

Notice the alert? qsdfundefined

You need to defined m before assigning it somewhere.
var m = 0;
var qsdf = "qdsf" + m;
alert(qsdf)

Here you will get "jdage0"

Here is a cleaned up version of your code. With the coding convention I use (check my faqs on coding conventions and string speeds).

<html>
<body>

<script>
var m = 0;
document.write("<FORM NAME=clothing>"
+ "<TABLE>"
+ "<TR>"
+ "<TD><INPUT NAME=jdage" + (m++) + " TYPE=RADIO VALUE=toddler CHECKED>Toddler</TD>"
+ "<TD><INPUT NAME=jdage" + (m++) + " TYPE=RADIO VALUE=youth>Youth</TD>"
+ "<TD><INPUT NAME=jdage" + (m++) + " TYPE=RADIO VALUE=adult>Adult</TD>"
+ "</TR>"
+ "</table>"
+ "<BR>&quot

;

for (var i = 0; i < m; i++)
{
eval("alert(document.clothing.jdage" + i + ".value)&quot

}
</script>

</body>
</html>

I do think however that what you want to know is wether or not each element was checked (it would seem logical to me that this is the important information. If that is the case I recommend this :

<html>
<body>

<script>
var m = 0;
document.write("<FORM NAME=clothing>"
+ "<TABLE>"
+ "<TR>"
+ "<TD><INPUT NAME=toddler TYPE=RADIO VALUE=toddler CHECKED>Toddler</TD>"
+ "<TD><INPUT NAME=youth TYPE=RADIO VALUE=youth>Youth</TD>"
+ "<TD><INPUT NAME=adult TYPE=RADIO VALUE=adult>Adult</TD>"
+ "</TR>"
+ "</table>"
+ "<BR>&quot

;

for (var i = 0; i < document.clothing.elements.length; i++)
{
var element = document.clothing.elements;
alert(element.name + " is " + (element.checked ? "checked": "unchecked&quot)
}
</script>

</body>
</html>

Notice I use names of elements that mean something like toddler, youth and adult.

Let me know if these examples come in handy. Gary
http://www.xutopia.com
Haran

Targol · Oct 30, 2002

xutopia (alias Gary) is so modest that he forgot to give you the link to his excellent faq about speeding Scripts. Here it is :

http://www.tek-tips.com/faqs.cfm?spid=216&sfid=1758&CFID=86731259&CFTOKEN=57298202

Water is not bad as long as it stays out human body ;-)

xutopia · Oct 30, 2002

sorry about that last part being all italic here is the correct version :

for (var i = 0; i < document.clothing.elements.length; i++)
{
var element = document.clothing.elements;
alert(element.name + " is " + (element.checked ? "checked": "unchecked&quot)
}

Thanks targol for reminding me!

Speed up String in JavaScript up to ten times!
faq216-1758

What is a coding convention and how does it help me?
faq216-1736 Gary
http://www.xutopia.com
Haran

Sarah555 · Oct 30, 2002

Thank-you xutopia and Targol for your advice. I have done as you recommended but now I get the error message that 'document.clothing.jdage0.value' is null or not an object. Since I have deliberately checked the radio buttons I don't think it should be null. I need to know the value of the radio button checked to preform calculations. Also, I can not name the radio buttons toddler, youth and adult as they may be created several times.

xutopia · Oct 30, 2002

Sarah,

Could you show us the code now?

Targol,

I realise I posted right after you. I clicked submit about 13 nanoseconds after you. Didn't mean to look like I knew better. A star for you for linking to my FAQ and warning us about water!

Gary

http://www.xutopia.com

Haran

Sarah555 · Oct 30, 2002

Here it is:

Code:

document.write(&quot;<TABLE>&quot;);
document.write(&quot;<TR>&quot;);
 + &quot;<TD><INPUT NAME=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=toddler CHECKED>Toddler</TD>&quot;
+ &quot;<TD><INPUT NAME=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=youth>Youth</TD>&quot;
+ &quot;<TD><INPUT NAME=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=adult>Adult</TD>&quot;
document.write(&quot;</TR>&quot;);
document.write(&quot;</table>&quot;);
document.write(&quot;<BR>&quot;);

for (var a = 0; a < m; a++)
{
eval(&quot;alert(document.clothing.jdage&quot; + a + &quot;.value)&quot;)
}

After I get the code working properly I will be change the hundred or so document.writes to +. Thanks for the link to the FAQ section!

xutopia · Oct 30, 2002

Ok I cleaned up the code a bit to see it and inserted in a very simple HTML page.

Problems :

1. The variable m was not initialised and was causing errors.
2. There was no form with name clothing in the document write.

Here is the fixed code :

<html>
<body>

<script>
var m = 0;
document.write("<form name=clothing><table>"
+ "<TR>"
+ "<TD><INPUT NAME=jdage" + (m++) + " TYPE=RADIO VALUE=toddler CHECKED>Toddler</TD>"
+ "<TD><INPUT NAME=jdage" + (m++) + " TYPE=RADIO VALUE=youth>Youth</TD>"
+ "<TD><INPUT NAME=jdage" + (m++) + " TYPE=RADIO VALUE=adult>Adult</TD>"
+ "</TR>"
+ "</table></form>"
+ "<BR>&quot

;

for (var a = 0; a < m; a++)
{
alert(eval("document.clothing.jdage" + a + ".value&quot

)
}
</script>

</body>
</html> Gary

http://www.xutopia.com

Haran

Sarah555 · Oct 30, 2002

Hi xutopia,

I have the code as you indicated but still get the error that document.clothing.jdage0.value is null or not an object. I am at a lose what to do to get the value which I need to preform the calculation that is critical to the web page. I want you to know your help has been appreciated.

Sarah555

Targol · Oct 30, 2002

Hi, Sarah, May be you can solve your problem by adding the id attribute to all your input tags (withe the same attribute value the the name attrib) as some browsers (like IE6, use this attribute rather than name. Also, if you use the id Attribute, you can use the

Code:

document.getElementById()

method to get the ref of your tag object without having to know the HTML path to reach it. Water is not bad as long as it stays out human body ;-)

xutopia · Oct 31, 2002

Sarah,

What browser are you getting this error in? Gary

http://www.xutopia.com

Haran

Sarah555 · Oct 31, 2002

I am getting the error in IE6. Will the getElementById() method also work in Netscape 7? I have changed the code as presented below and for the eval(alert) portion I get the value of null three times. I have been working on this problem for over two weeks trying different things different ways so I want to make sure that you, xutopia and Targol, know that your help is greatly appreciated! I don't know if this makes a difference but I am now thinking it might ... the whole web page is created dynamically with an onLoad()="Main()"; in the body portion of the HTML. It also includes a section to read cookies and print out the main value based on the value of cookies, so if the cookie equals 2 it is printed out 2 times.

Code:

<html>
<head>

<script>
function Main()
{
var m = 0;
document.write(&quot;<form name=clothing><table>&quot;
document.write(&quot;<TABLE>&quot;);
document.write(&quot;<TR>&quot;);
+ &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=toddler CHECKED>Toddler</TD>&quot;
+ &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=youth>Youth</TD>&quot;
+ &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=adult>Adult</TD>&quot;
   
document.write(&quot;</TR>&quot;);
document.write(&quot;</table>&quot;);
document.write(&quot;<BR>&quot;);
for (var a = 0; a < m; a++)
{
eval(&quot;alert(document.getElementById('jdage' + a))&quot;)
}
}
</script>

</head>
<body onLoad=&quot;Main()&quot;;>
</html>

xutopia · Oct 31, 2002

sarah,

I cleaned up the code again. document.write had a starting ( but no closing ) in the first occurence. Notice I use only one document.write in the example below. It looks cleaner and is faster to execute.

document.getElementById() works in IE 5 and above and is a standard so you will not have to worry about it not working with any future browsers.

Here is a cleaned up version.

<html>
<head>

<script>
function Main()
{
var m = 0;
document.write("<form name=clothing>"
+ "<table>"
+ "<TR>"
+ "<TD><INPUT NAME=jdage" + (m) + " ID=jdage" + (m++) + " TYPE=RADIO VALUE=toddler CHECKED>Toddler</TD>"
+ "<TD><INPUT NAME=jdage" + (m) + " ID=jdage" + (m++) + " TYPE=RADIO VALUE=youth>Youth</TD>"
+ "<TD><INPUT NAME=jdage" + (m) + " ID=jdage" + (m++) + " TYPE=RADIO VALUE=adult>Adult</TD>"
+ "</TR>"
+ "</table>"
+ "</form>"
);

for (var a = 0; a < m; a++)
{
alert(document.getElementById('jdage' + a).value)
}
}
</script>

</head>
<body onLoad="Main()";>

</body>
</html> Gary

http://www.xutopia.com

Haran

Sarah555 · Nov 1, 2002

Thank-you so much xutopia. I do not know how to tell you how much your help is appreciated. I am designing web sites for people with disabilities that are starting their own businesses. This particular code is for a shopping cart that I am designing. I have taught myself JavaScript for it and appreciate your tips to improve my code. I have included the code to extract the value of the checked radio button for anyone reading this thread.

Code:

<html>
<head>

<script>
function Main()
{
  var m = 0;
  document.write(&quot;<form name=clothing>&quot;
  + &quot;<table>&quot;
  + &quot;<TR>&quot;
  + &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=toddler CHECKED>Toddler</TD>&quot;
  + &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=youth>Youth</TD>&quot;
  + &quot;<TD><INPUT NAME=jdage&quot; + (m) + &quot; ID=jdage&quot; + (m++) + &quot; TYPE=RADIO VALUE=adult>Adult</TD>&quot;
  + &quot;</TR>&quot;
  + &quot;</table>&quot;
  + &quot;</form>&quot;
  );


  for (var a = 0; a < m; a++)
  {
  if (document.getElementById('jdage' + a).checked)
  {
    alert(document.getElementById('jdage' + a).value)
  }
  }
}
</script>

</head>
<body onLoad=&quot;Main()&quot;;>

</body>
</html>

Thank-you again xutopia!!!

xutopia · Nov 1, 2002

I'm glad i'm helping people that help people!

Gary

http://www.xutopia.com

Haran

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Referencing dynamically created form elements 2

Sarah555

Programmer

Targol

Technical User

xutopia

Programmer

Targol

Technical User

xutopia

Programmer

Sarah555

Programmer

xutopia

Programmer

Sarah555

Programmer

xutopia

Programmer

Sarah555

Programmer

Targol

Technical User

xutopia

Programmer

Sarah555

Programmer

xutopia

Programmer

Sarah555

Programmer

xutopia

Programmer

Similar threads

Part and Inventory Search

Sponsor