Create a RadioButton in Code for NN

M

Mark

Hi - my code below works in IE6, but not in NN7 - I thought it was using
the correct standards, but could anyone please tell me where I'm going
wrong?

Thanks, Mark

<HTML>
<HEAD>
<SCRIPT>
function createRadioButton(){
var newRadioButton = document.createElement("<INPUT TYPE='RADIO'
NAME='RADIOTEST' VALUE='First Choice'>")
alert(newRadioButton);
document.getElementById("mtwrite").appendChild(newRadioButton);
}
</SCRIPT>

</HEAD>

<BODY>
<INPUT TYPE="BUTTON" ONCLICK="createRadioButton()" VALUE="Create two
Radio Buttons"><BR>
<table><tr><td id="mtwrite"></td></tr></table>
<BODY>
</HTML>
 
M

Michael Winter

Hi - my code below works in IE6, but not in NN7 - I thought it was using
the correct standards, but could anyone please tell me where I'm going
wrong?
Click to expand...

The createElement() method is supposed to receive the element name only.
You passed the entire tag.

I'm not clear (having not done it before) on how one then sets the
attributes. The two choices are altering the properties of the new Element
instance, or creating the attributes with createAttribute() and adding
them with setAttribute(). Can anyone indicate which is the most correct
way of doing it?

Mike
 
R

Randy Webb

Michael said:
The createElement() method is supposed to receive the element name only.
You passed the entire tag.

I'm not clear (having not done it before) on how one then sets the
attributes. The two choices are altering the properties of the new
Element instance, or creating the attributes with createAttribute() and
adding them with setAttribute(). Can anyone indicate which is the most
correct way of doing it?
Click to expand...

Alter its properties.
There have been problems when trying to use setAttribute().
 
D

DU

Mark said:
Hi - my code below works in IE6, but not in NN7 - I thought it was using
the correct standards,
Click to expand...

No. It uses a dedicated workaround for MSIE 6.

but could anyone please tell me where I'm going
wrong?
Click to expand...

Your code is not using valid markup to start with.
Thanks, Mark

<HTML>
<HEAD>
<SCRIPT>
function createRadioButton(){
var newRadioButton = document.createElement("<INPUT TYPE='RADIO'
NAME='RADIOTEST' VALUE='First Choice'>")
alert(newRadioButton);
document.getElementById("mtwrite").appendChild(newRadioButton);
}
</SCRIPT>

</HEAD>

<BODY>
<INPUT TYPE="BUTTON" ONCLICK="createRadioButton()" VALUE="Create two
Radio Buttons"><BR>
<table><tr><td id="mtwrite"></td></tr></table>
<BODY>
</HTML>
Click to expand...

The following will work in NS 7.1, Mozilla 1.6, Opera 7.50 and MSIE 6
for windows. The code was tested on these browsers in a XHTML 1.0 strict
webpage.

javascript:
-----------

function DynamicallyCreate2RadioButtons()
{
var LabelFirstInput = document.createElement("label");
var LabelSecondInput = document.createElement("label");
if(document.all && !window.opera && document.createElement)
{
var FirstInput = document.createElement("<input type='radio'
name='radiotest' id='idFirstInputRadio' value='first choice'>");
var SecondInput = document.createElement("<input type='radio'
name='radiotest' id='idSecondInputRadio' value='second choice'>");
}
else if(document.createElement && document.createTextNode)
{
var FirstInput = document.createElement("input");
var SecondInput = document.createElement("input");
FirstInput.type = SecondInput.type = "radio";
FirstInput.name = SecondInput.name = "radiotest";
FirstInput.id = "idFirstInputRadio";
SecondInput.id = "idSecondInputRadio";
FirstInput.value = "first choice";
SecondInput.value = "second choice";
}
else
{
return
};
LabelFirstInput.appendChild(FirstInput);
LabelFirstInput.htmlFor = "idFirstInputRadio";
LabelFirstInput.appendChild(document.createTextNode("First option"));
document.forms[0].childNodes[0].appendChild(LabelFirstInput);

document.forms[0].childNodes[0].appendChild(document.createElement("br"));

LabelSecondInput.appendChild(SecondInput);
LabelSecondInput.htmlFor = "idSecondInputRadio";
LabelSecondInput.appendChild(document.createTextNode("Second option"));
document.forms[0].childNodes[0].appendChild(LabelSecondInput);
}

HTML
 
D

DU

Michael said:
The createElement() method is supposed to receive the element name only.
You passed the entire tag.
Click to expand...

That's because this is the only known way to create and embed radio
inputs in MSIE 6. Such dedicated workaround for MSIE and way of coding
the createElement was mentioned before in this newsgroup IIRC.
I'm not clear (having not done it before) on how one then sets the
attributes. The two choices are altering the properties of the new
Element instance,
Click to expand...

and that is the most frequent choice (and most relevant to use) one need
to use in 95% of the time. DOM 1 HTML list all assignable HTML attributes.
E.g. for form input:
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025

DU

or creating the attributes with createAttribute() and
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I create a table using the input element? 1
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Help with code 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Only one table shows up with the information 2
In javascript, XML File Create, File Save 2
How do I fix this issue in sqaurespace code block? 1
Bootstrap contact form not working 2

Members online

No members online now.
Total: 375 (members: 0, guests: 375)
Robots: 408

Forum statistics

Threads
474,431
Messages
2,571,677
Members
48,796
Latest member
Greg L.

Latest Threads

Top