Log in

View Full Version : Javascript for comma seperated list to radio buttons


lilpete
09-17-2010, 11:11 AM
Hi Guys and Girls,

I am not sure if I am being cheeky here but I need some Javascript written for me as I dont have the skills to do it.

Here is the problem:
I have a comma seperated list of sizes and I need to get from that a radio button group to select a size.
Page is here:-
http://www.test.steptoes.co.uk/product-display_El-Naturalista-N400_dGFibGU9cHJvZHVjdCZmaWVsZD1Db2RlMSZ2YWx1ZT1ONDAw.ghtml

That is the way the sizes are stored in the database, they are called with a little bit of code in the original HTML: [_own Size_]



<div id="sizes">
[_own Size_]<br /><br />
<input type="submit" name="action" value="Add to Basket" class="button">
</div>

Is there any chance someone could find the time to write me such a script?
I did have a similar one to turn it into a list, but it was not written by me:-


function changeSize(list,item) {

var id = item.options[item.selectedIndex].value;
var sizes = document.getElementById("sizes_" + id).value;
sizesArray = sizes.split(",");
//id = sizesArray.splice(0,1);
//item.options[item.selectedIndex].value = id;

list.length = 0;
list[0] = new Option("Choose","");

for (n=0;n<sizesArray.length;n++){
list[n+1] = new Option(sizesArray[n],sizesArray[n]);
}
list.focus()
}

Any help on this would much appreciated.
Best Regards,
Pete
vwphillips
09-17-2010, 11:42 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

</head>
<div id="Sizes1" ></div>
<body>
<script type="text/javascript">
/*<![CDATA[*/

var sizesArray=[36,37,38,39,40,41,42];

function MySizes(id,ary){
var obj=document.getElementById(id);
for (var ip,z0=0;z0<ary.length;z0++){
ip=zxcFormField('INPUT',id+'Size','radio');
ip.value=ary[z0];
ip.style.marginRight='10px';
obj.appendChild(document.createTextNode(ary[z0]));
obj.appendChild(ip);
}

}

function zxcFormField(tag,nme,type){
var el;
try {
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}

MySizes('Sizes1',sizesArray)
/*]]>*/
</script>
</body>

</html>
lilpete
09-17-2010, 12:43 PM
Hi Vic,

Awesome, it works, but then the script is repeated as you go down the page so it only works for the first item on the page.

http://www.test.steptoes.co.uk/product-display_El-Naturalista-N400_dGFibGU9cHJvZHVjdCZmaWVsZD1Db2RlMSZ2YWx1ZT1ONDAw.ghtml

I can use this little insert : [_var c_]
Basically that will read as 1 in the first item, 2 in the second and 3 in the third and so on,
so if it is a unique identifier you need each time the script is used then this might be the thing to use.

Thank you for your time.
Best regards,
Pete
vwphillips
09-17-2010, 01:30 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

</head>
<div id="Sizes1" >Sizes1<br /></div>
<div id="Sizes2" >Sizes2<br /></div>
<body>
<script type="text/javascript">
/*<![CDATA[*/


function MySizes(id,ary){
var obj=document.getElementById(id);
for (var ip,z0=0;z0<ary.length;z0++){
ip=zxcFormField('INPUT',id+'Size','radio');
ip.value=ary[z0];
ip.style.marginRight='10px';
obj.appendChild(document.createTextNode(ary[z0]));
obj.appendChild(ip);
}

}

function zxcFormField(tag,nme,type){
var el;
try {
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}

var sizesArray1=[36,37,38,39,40,41,42];
var sizesArray2=[36,37,38,39,40];
MySizes('Sizes1',sizesArray1)
MySizes('Sizes2',sizesArray2)
/*]]>*/
</script>
</body>

</html>