help me

ankitvermamca · Mar 9, 2006

I'm trying to dynamically add radio inputs to a form, but it's not
working quite right. The code I have adds the radio buttons properly,
but they are not selectable, and I can't seem to be able to retrieve
the value. How do I fix it so they are selectable, and I can retrieve
the value of the one the user selects?

It only needs to work on IE5 or higher. Thanks in advance.

Dex*

---
Here is the code thus far
---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Radio Test</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
CHARSET=iso-8859-1">
<SCRIPT>
var nCount = 0;

function AddRadio()
{
var aE2 = document.createElement("<input
type=\"radio\">");
//aE2.Type = "radio";
aE2.Name = "SelOpt";
aE2.Value = ++nCount;

var oRow = tblTest.insertRow(-1);
var oCell = oRow.insertCell(-1);
oCell.appendChild( aE2 );

oCell = oRow.insertCell(-1);
oCell.innerHTML = "Option #" + nCount;
}

function RadioTest()
{
var str = "Options Created = " + nCount + "\n" +
"Selected = " +
frmTest.SelOpt.value;
divResult.innerHTML = str;
}

</SCRIPT>
</HEAD>
<BODY>
<BLOCKQUOTE>
<h1>Radio Test</h1>
<input type=button onclick="AddRadio();" value="Add
Radio Option">
<br>
<input type=button onclick="RadioTest();" value="Show
Option" ID="Button1" NAME="Button1">
<p>
<div id="divResult"></div>
</p>
<form id="frmTest">
<table id="tblTest">
</table>
</form>
</BLOCKQUOTE>
</BODY>
</HTML>

RobG · Mar 9, 2006

I'm trying to dynamically add radio inputs to a form, but it's not
working quite right. The code I have adds the radio buttons properly,
but they are not selectable, and I can't seem to be able to retrieve
the value.

Then they aren't being added 'right'.

How do I fix it so they are selectable, and I can retrieve
the value of the one the user selects?

It only needs to work on IE5 or higher. Thanks in advance.

Dex*

Surely it's time to move to a strict DTD?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE>Radio Test</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
CHARSET=iso-8859-1">
<SCRIPT>

The type attribute is required:

var nCount = 0;

function AddRadio()
{
var aE2 = document.createElement("<input
type=\"radio\">");

Manually wrap code at about 70 characters so it won't auto-wrap, even if
quoted a couple of times.

The argument to createElement is the tag name, not HTML markup. The
properties are added separately:

var aE2 = document.createElement('input');
aE2.type = 'radio';

//aE2.Type = "radio";
aE2.Name = "SelOpt";
aE2.Value = ++nCount;

JavaScript is case sensitive:

aE2.name = "SelOpt";
aE2.value = ++nCount;

var oRow = tblTest.insertRow(-1);

Where is 'tblTest' defined? Using the name or ID of an element as a
global variable is an IE-ism that will cause you serious trouble in
anything other than trivial pages and makes your script unnecessarily
IE-specific.

var tblTest = document.getElementById('tblTest');

var oCell = oRow.insertCell(-1);
oCell.appendChild( aE2 );

oCell = oRow.insertCell(-1);
oCell.innerHTML = "Option #" + nCount;

Since you're using DOM elsewhere, use:

oCell.appendChild(document.createTextNode('Option #' + nCount));

}

function RadioTest()
{
var str = "Options Created = " + nCount + "\n" +

Inserting '\n' in a string intended to be used for innerHTML will result
in the HTML source having newlines, but they are treated just like any
other whitespace in HTML and will not create a new line like a BR
element would.

"Selected = " +
frmTest.SelOpt.value;

Where is frmTest defined? Use:

var frmTest = document.forms['frmTest'];

Where is SelOpt defined?

var SelOpt = frmTest.elements['SelOpt'];

Because you've potentially got one or more elements with the name
'SelOpt', the variable will be assigned either a reference to an
individual element or to a HTML collection of all the elements named
'SelOpt'.

In the first case, SelOpt.value will return the value of the element,
but in the latter case, you will get 'undefined' because a HTML
collection doesn't have a 'value' property.

divResult.innerHTML = str;

Where is divResult defined? Use getElementById().

}

</SCRIPT>
</HEAD>
<BODY>
<BLOCKQUOTE>

The use (abuse?) of blockquote to create indented text is discouraged.
Use CSS margin or padding instead.

<h1>Radio Test</h1>
<input type=button onclick="AddRadio();" value="Add
Radio Option">
<br>
<input type=button onclick="RadioTest();" value="Show
Option" ID="Button1" NAME="Button1">
<p>
<div id="divResult"></div>
</p>
<form id="frmTest">

An action attribute is required.

<table id="tblTest">
</table>

A table must contain at least one row[1], which must contain at least
one cell, otherwise you have invalid HTML.

</form>
</BLOCKQUOTE>
</BODY>
</HTML>

1. Strictly speaking, a TABLE must contain a TBODY element
but the tags are optional. The TBODY must contain at
least one TR element and a TR must contain at least one
TD or TH element. As closing tags for TR, TD and TH are
optional, the minimum valid HTML 4 markup for a table is:

<table><tr><td></table>

I dont get this. Please help me!!	2	Jan 24, 2023
"input-group-text" help	7	Aug 10, 2023
Hey can anyone tell me why input data wont save in my database?	2	Jun 15, 2024
Javascrip code wont run properly.	2	Oct 2, 2022
Help me sort out this script	1	Oct 17, 2023
Php modal form to email	1	Aug 28, 2024
I need help making an html website	2	Aug 1, 2023
<div> help	1	Mar 4, 2024

help me

ankitvermamca

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads