Solved

Problem with DOM: Radio, checked and style

Posted on 2004-04-17
21
1,282 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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
 

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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

628 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