Solved

Problem with DOM: Radio, checked and style

Posted on 2004-04-17
21
1,265 Views
Last Modified: 2013-11-19
Hello, I have this piece of code, that adds two radio buttons dynamically with DOM.
I have some problems. First, it doesn't let me check them. I also can't dynamically check one of them as default. And When I try to add styles dynamically, I can't either (look at the // lines). I would like for example both words "option 1" and "Option 2" in red, and the second radio button moved to the right 150px.
I hope you can help me, thank you very much. ;)

<html>
<head>
<script>
function add() {
var obj = document.createElement("input");
obj.setAttribute("type", "radio");
obj.setAttribute("name", "option");
obj.setAttribute("value", "1");
document.frm.appendChild(obj);
obj = document.createTextNode("Option 1");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj);
var obj2 = document.createElement("input");
obj2.setAttribute("type", "radio");
obj2.setAttribute("name", "option");
obj2.setAttribute("value", "2");
//obj2.setAttribute("style", "position:relative; left:150px;");
document.frm.appendChild(obj2);
obj2 = document.createTextNode("Option 2");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj2);

}
</script>
</head>
<body>
<a href="javascript:add();">Add</a><br>
<form name="frm"></form>
</body>
</html>
0
Comment
Question by:DeLaVegaz
  • 9
  • 9
  • 2
  • +1
21 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10851076
option is not a great name and does
obj.setAttribute("checked", true);

not work?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10851091
Here is a working example, see comments for explanations.

<html>
<head>
<script>
function add() {
var obj = document.createElement("input");
obj.setAttribute("type", "radio");
obj.setAttribute("name", "option");
//YOU ALSO HAVE TO SET THE ID, OR THE NAME WILL NOT BE SET
obj.setAttribute("id", "option");
obj.setAttribute("value", "1");

document.frm.appendChild(obj);
//THIS IS HOW YOU SET THE STYLE
//first create a font
var cont=document.createElement("font");
//now set the colour
cont.style.color="red";
//now set the text
var txt = document.createTextNode("Option 1");
//now add the text
cont.appendChild(txt);
document.frm.appendChild(cont);

var obj2 = document.createElement("input");
obj2.setAttribute("type", "radio");
obj2.setAttribute("name", "option");
obj2.setAttribute("id", "option");
obj2.setAttribute("value", "2");
//obj2.setAttribute("style", "position:relative; left:150px;");
document.frm.appendChild(obj2);
obj2 = document.createTextNode("Option 2");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj2);

//THIS IS HOW YOU SET IT CHECKED BY DEFAULT
//YOU MUST PUT THIS AT THE END
//obj.checked=true;
//OR...
obj.setAttribute("checked",true);
}
</script>
</head>
<body>
<a href="javascript:add();">Add</a><br>
<form name="frm"></form>
</body>
</html>
0
 

Author Comment

by:DeLaVegaz
ID: 10851093
Yes, anyway I don't call it "option" in my page, I just changed the name to post here and I didn't notice....
No, that doesn't work...
Thank you anyway ;)
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10851099
Basically:

1) You cannot set the style of a text node, so you have to put the text in a container, like a font tag. You could also use span or div.
2) You cannot set the style by using: obj.setAttribute("style","color:red") you have to use: obj.style.color="red"
3) You must put the checked part at the very end.
0
 

Author Comment

by:DeLaVegaz
ID: 10851115
And what about the position (style)? How can I do it?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10851124
Probably add a span before the radio buttons:

(Put this at the beginning of the function)

obj=document.createElement("span");
obj.style.width=150;
document.frm.appendChild(obj);
0
 

Author Comment

by:DeLaVegaz
ID: 10853750
Great, thank you a lot... ;)
Everything works except one thing...
I still can't check other options, I mean, for example, option 1 is checked by default, when I try to check option 2, nothing happens, I can't select it (I also try adding an option 3 and it's the same). All the options have the same name attribute, and at first different Ids (just for trying I put them the same id, but I suppose they should have different, anyway, it doesn't work).
I also try to left option 1 checked true by default, and the others checked false, but doesn't either.... :(
If I don't user the checked by default, I can't check none...
Hope you can help, thank you again....
0
 
LVL 3

Expert Comment

by:azcn2503
ID: 10853916
It's as if the name attribute doesn't work.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854016
Sorry, forgot about that. This will work:

<html>
<head>
<script>
function add() {
var obj = document.createElement("input");
if(document.all){obj=document.createElement("<input name='option'>");}
obj.setAttribute("type", "radio");
obj.setAttribute("name", "option");
//YOU ALSO HAVE TO SET THE ID, OR THE NAME WILL NOT BE SET
obj.setAttribute("id", "option");
obj.setAttribute("value", "1");

document.frm.appendChild(obj);
//THIS IS HOW YOU SET THE STYLE
//first create a font
var cont=document.createElement("font");
//now set the colour
cont.style.color="red";
//now set the text
var txt = document.createTextNode("Option 1");
//now add the text
cont.appendChild(txt);
document.frm.appendChild(cont);

var obj2 = document.createElement("input");
if(document.all){obj2=document.createElement("<input name='option'>");}
obj2.setAttribute("type", "radio");
obj2.setAttribute("name", "option");
obj2.setAttribute("id", "option");
obj2.setAttribute("value", "2");
//obj2.setAttribute("style", "position:relative; left:150px;");
document.frm.appendChild(obj2);
obj2 = document.createTextNode("Option 2");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj2);

//THIS IS HOW YOU SET IT CHECKED BY DEFAULT
//YOU MUST PUT THIS AT THE END
//obj.checked=true;
//OR...
obj.setAttribute("checked",true);
}
</script>
</head>
<body>
<a href="javascript:add();">Add</a><br>
<form name="frm"></form>
</body>
</html>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854018
Internet explorer does weird things when you try to name form elements, so you have to specify it in the createElement:

document.createElement("<input name='option'>")
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:DeLaVegaz
ID: 10854054
Ohh, and with other types of inputs like text or checkbox, do I have to do this too? Thanks you!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854127
I think it only applies to radio buttons, because with other elements, you don't need to worry about them not being in the same group. :) Setting the id will take care of the name for other elements.
0
 

Author Comment

by:DeLaVegaz
ID: 10854775
Great, now it works perfectly.... last question and I don't disturb anymore with this ;)
The if with the document.all, is it related with Internet Explorer 4? Why should it be used?
Thank you so much :)
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 50 total points
ID: 10854795
document.all works with all Internet explorer browsers. So basically I'm just detecting if the browseris IE or not. :)
0
 

Author Comment

by:DeLaVegaz
ID: 10854801
to detect Internet Explorer?
0
 

Author Comment

by:DeLaVegaz
ID: 10854813
Thank you!!!!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854825
Glad to help. :) Thanks for the points and the A.
0
 

Author Comment

by:DeLaVegaz
ID: 10854885
You're welcome... I was reading other posts and I've found you are just 15 years old??? Well, Congratulations! :))
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10855336
So you said
obj.setAttribute("checked",true);
does not work, but it did
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10855351
Yes, I'm 15. :P

mplungian,
It does not work unless you put the code at the very end. :)
0
 

Author Comment

by:DeLaVegaz
ID: 10856603
obj.setAttribute("checked",true);
It was not working for me because I was testing the code in IE without knowing all of this..... Then when I tested in Mozilla, Firefox and Netscape, It worked...
Thanks... ;)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to count occurrences of each item in an array.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now