Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I want my store to have possablity to choose from multiple ram, hdd choises.
So far I got this javascript that does the job well when there is only one set of radio boxes - for example RAM.
But I want to customize it, so it would allow me to have multiple components like HDD, VGA and so on.
How can I do that?function setOn()
{
var theRadios = document.getElementsByName('RAM');
for(var i = 0; i < theRadios.length; i++)
{
theRadios[i].parentNode.className = 'off'; //Sets all spans class name to off
theRadios[i].onclick = function() //assigns a function to the onclick event of the radios
{
setOn();
}
if(theRadios[i].checked == 1) //if the radio button is checked then it will give the span that its in a class name of on
{
theRadios[i].parentNode.className = 'on';
}
}
}
onload = setOn; -
Here's what I'd do. It's not the prettiest piece of code I've written, but it could work with what you already have.
Group all your radio button sets into a group that would have the same name for each types of controls.<div name="component">
<span> web controls 1</span>
</div>
<div name="component">
<span> web controls 2</span>
</div>
Then in your JS you can change your function to something like this :function setOn()
{
var components = document.getElementsByName('component');
for(var i = 0; i < components.length; i++)
{
var inputs = components[i].getElementsByTagName('input');
for(var k = 0; k < inputs.length; k++)
{
// Maybe validate if the input.type = radiobutton if you want to make sure
inputs[k].parentNode.className = 'off'; //Sets all spans class name to off
inputs[k].onclick = function() //assigns a function to the onclick event of the radios
{
setOn();
}
if(theRadios[k].checked == 1) //if the radio button is checked then it will give the span that its in a class name of on
{
theRadios[k].parentNode.className = 'on';
}
}
}
onload = setOn; -
I don't seem to understand how I should use it.
My html looks like this:<div id="computersComponentChoose">
<fieldset><input type="hidden" name="phpMyAdmin" value="4594f30712f4fabaff6997416810f3f2" />
<label class="off"><input type="radio" value="RAM1" name="RAM" />512MB 667 DDR2 SDRAM - 1x512MB</label><br />
<label class="off"><input type="radio" value="RAM2" name="RAM" checked="checked" />512MB 667 DDR2 SDRAM - 2x256MB</label><br />
<label class="off"><input type="radio" value="RAM3" name="RAM" />1GB 667 DDR2 SDRAM - 2x512MB</label><br />
<label class="off"><input type="radio" value="RAM4" name="RAM" />1GB 667 DDR2 SDRAM - 1x1GB</label><br />
</fieldset>
</div> -
Never mind, I seem to have found a solution.
function setOn()
{
var RadioRAM = document.getElementsByName('RAM');
var RadioHDD = document.getElementsByName('HDD');
// RAM
for(var i = 0; i < RadioRAM.length; i++)
{
RadioRAM[i].parentNode.className = 'off'; //Sets all spans class name to off
RadioRAM[i].onclick = function() //assigns a function to the onclick event of the radios
{ setOn(); }
if(RadioRAM[i].checked == 1) //if the radio button is checked then it will give the span that its in a class name of on
{ RadioRAM[i].parentNode.className = 'on'; }
}
// HDD
for(var i = 0; i < RadioHDD.length; i++)
{
RadioHDD[i].parentNode.className = 'off'; //Sets all spans class name to off
RadioHDD[i].onclick = function() //assigns a function to the onclick event of the radios
{ setOn(); }
if(RadioHDD[i].checked == 1) //if the radio button is checked then it will give the span that its in a class name of on
{ RadioHDD[i].parentNode.className = 'on'; }
}
}
onload = setOn; -
do this at least, it'll be easier to update and add more computer choices afterwards if you isolate the groups:
function initComponents()
{
attachClickEvent(document.getElementsByName('RAM'));
attachClickEvent(document.getElementsByName('HDD'));
}
function attachClickEvent(radioArray)
{
for(var i = 0; i < radioArray.length; i++)
{
radioArray[i].onclick = toggle(radioArray[i]); // called each clicks
toggle(radioArray[i]); // direct call to style elements already selected
}
}
function toggle(input)
{
if(input.checked)
input.parentNode.className = 'on';
else
input.parentNode.className = 'off';
}
onload = initComponents; -
Thanks for the support. I have just started to learn any thing about JavaScript - but now I see that it's not so difficult.
-
yeah, it's really one of the easiest languages. Glad i could help you out.
-
I want my store to have possablity to choose from multiple ram, hdd choises.
Is that actually working? I thought the point of radio buttons was that you're only allowed to choose one from that set, if you wanted to pick multiple options you use checkboxes instead. -
I think he wanted to say he wanted to use the same JS code to highlight the selected row of each radio button set, not multiple choices
-
ah, okay, nm then. :)
-
Yap.
1 to 11 of 11