I am trying to turn radio buttons to show images based off the label of the radio button input instead of using radio buttons.
I have to use only javascript for this and I am at a loss. Can anyone help me out.
Printable View
I am trying to turn radio buttons to show images based off the label of the radio button input instead of using radio buttons.
I have to use only javascript for this and I am at a loss. Can anyone help me out.
Your question is confusing. Please clarify.
I use some store software that has radio buttons for color choices. I am trying to figure out how to change the radio button selection from radio style buttons to a small image of the color. I know it has to be with javascript but I am at a loss how to do it.
So in the code it has the <input> and a <label> I would like it to load an imaged based off the <label> tag.
Example:
<label>white</label> instead of radio button it would load a 50x50px image of white
I hope that clears it up some.
yea, you'd use javascript to read whatever the label is and display the image accordingly.
What's the code look like so far?
Thats the kicker Im at a loss. I don't know where to start with this. I understand a bit of javascript and I have been looking all over the web for help on this and I haven't found much.
I dont usually code in Javascript but I have to with the company that we are using for the cms solution
Also great wedding site.. the picture of you two under the pink flowers is a great shot.
I have some code that should help switch out the color name with an image. But I don't think it will work the way I need it. Here it is:
replaceImages = new Array(
’White|white.gif’,
’Blue|blue.gif’,
’Black|black.gif’
);
function firdom(){
if(document.getElementsByTagName && document.createElement){
for (l=1;l<=6;l++){
h1s=document.getElementsByTagName(’h’+l);
scanandreplace(h1s,’h’+l);
}
}
}
function scanandreplace(h1s,tag){
for(i=0;i<h1s.length;i++){
for(f=0;f<replaceImages.length;f++){
chunks=replaceImages[f].split(’|’);
thish1=document.getElementsByTagName(tag)[i];
if(thish1.firstchild.nodevalue==chunks[0]){
newimg=document.createElement(’img’);
newimg.setattribute(’alt’,chunks[0])
newimg.setattribute(’src’,chunks[1])
// or newimg.src=chunks[1];
}
}
}
}
window.onload=firdom;
Where the words white is I woudl like to pull from the <label> tag this way It could be used without having to edit it each time. Then I would like the image to become a radio button input.
Thanks for the compliment on the site :)
Anyway, I'm having a hard time understanding exactly what you're trying to achieve. Could you possibly create a visual representation? Maybe illustrate what it looks like now, and what you are trying to get it to look like?
What does your HTML look like that you're trying to transform? You said it has labels and inputs, but is it wrapped in a DIV or anything? Are there any classes or ID's involved?
Ah yes, now we're cooking! Do you want to keep the actual radio button there? How is the user suppose to know which color is selected?
The user would just click on the color and the software will load the right photo in the large photo area.. That part works now. Its just the radio button part that doesnt work.
This should help explain how it's accomplished. Basically, you need to use JavaScript to figure out what radio buttons are present. You're then building a new list of colors and putting it right after the radio buttons. You then need to bind an onclick action to the newly added list which will select the correct radio button when it's clicked.
Check it out here:
http://jsfiddle.net/dfreema1/GGPgQ/
If everything is working, you'd then hide the radio buttons with CSS, leaving you with the desired result.
Good luck, and let me know if you need any clarification!
Alternative solution ... slightly smaller.
Code:<!DOCTYPE HTML>
<html>
<head>
<title> Radio Button Colors </title>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=247592
function setRBtn(RBtnGroup,which) {
var sel = document.getElementsByName(RBtnGroup);
for (var i=0; i<sel.length; i++) {
if (i == which) {
sel[i].checked = true;
document.getElementById('colorChosen').style.backgroundColor=sel[i].value;
}
}
}
// Following is not needed, only for demo
function toggleDisplay(IDS, flag) {
var tmp = document.getElementById(IDS);
if (flag == true) { tmp.style.display = 'inline'; }
else { tmp.style.display = 'none'; }
}
</script>
<style type="text/css">
#color_Options li {
width: 50px; height: 50px;
border: solid 1px #000;
list-style-type:none;
float:left;margin:5px 5px;
}
.blue {background-color: blue;}
.green {background-color: green;}
.sherbert {background-color: orange;}
.yellow {background-color: yellow;}
.red {background-color: red;}
.black {background-color: black;}
.white { background-color: white;}
</style>
</head>
<body>
// Following is not needed, only for demo
<input type="checkbox" onchange="toggleDisplay('RBtnBlock',this.checked)">
<div id="RBtnBlock" style="display:none">
<!-- change to 'block' for testing and 'none' after testing -->
<input type="radio" name="RBtn" value="white"> White
<input type="radio" name="RBtn" value="blue"> Blue
<input type="radio" name="RBtn" value="green"> Green
<input type="radio" name="RBtn" value="orange"> Orange
<input type="radio" name="RBtn" value="yellow"> Yellow
<input type="radio" name="RBtn" value="red"> Red
<input type="radio" name="RBtn" value="black"> Black
</div>
<ul id="color_Options">
<li class="white" onclick="setRBtn('RBtn',0)"></li>
<li class="blue" onclick="setRBtn('RBtn',1)"></li>
<li class="green" onclick="setRBtn('RBtn',2)"></li>
<li class="sherbert" onclick="setRBtn('RBtn',3)"></li>
<li class="yellow" onclick="setRBtn('RBtn',4)"></li>
<li class="red" onclick="setRBtn('RBtn',5)"></li>
<li class="black" onclick="setRBtn('RBtn',6)"></li>
</ul>
<!-- following is for testing purposes only -->
<div style="float:left">
<span style="float:left">Chosen: </span><div id="colorChosen"
style="width:50px; height:50px; border:solid 1px black; float:left;
margin:5px 5px; background-color:white; display:block;">
</div>
</div>
<br style="clear:both">
</body>
</html>
Im going to give it a try and ill let you know how it works out. Thanks a ton.
