...

View Full Version : How to control a radio button named id[15]



RobBass
11-01-2006, 04:35 PM
Hi all,

Can anyone help me with setting a radio button which is unfortunately named "id[15]" using javascript ?

I have html as below

<tr><td class="main"><input type="radio" name="id[15]" value="18" CHECKED>Up to 5</td></tr>
<tr><td class="main"><input type="radio" name="id[15]" value="19">Up to 7</td></tr>

I can't easily change the name of the radio button since it's an attribute of a shopping site and is generated by it's admin client.

So if the radio button was named radiobtnname, I think I'd need code like..

document.sampleform.radiobtnname[19].click()

but instead I'm stuck with

document.sampleform.id[15][19].click()

which javascript doesn't like.

Any help much appreciated.

krycek
11-01-2006, 05:22 PM
document.sampleform["id[15]"].click()

RobBass
11-01-2006, 07:55 PM
Many thanks krycek for the speedy response. I'm probably missing your hint
because I still can't get it working.

I'll try to explain...

I have a radio group named "id[15]" (a very unhelpful name because of the [] in it) where currently the checked radio button is value 18. I need to change it to 19.

So I'm trying things like

document.sampleform.id[15][19].click()

or

document.sampleform["id[15]"[19]].click()

but I get various js errors.

I'll past in the whole html below.. part of the script here is from Dynamic Drive. See the comment /**** IN HERE I'D LIKE TO SET THE RADIO BUTTON ********/

I'm testing it by typing more than 5 chars into the text box.

Many thanks for any help.



<html>
<head>

<script type="text/javascript">

/*
Form field Limiter script- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

var ns6=document.getElementById&&!document.all

function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}

function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length

/**** IN HERE I'D LIKE TO SET THE RADIO BUTTON ********/
if ( theform.value.length > 5 )
{
document.sampleform["id[15]"[19]].click()
}


var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}


function displaylimit(thename, theid, thelimit){
var theform=theid!=""? document.getElementById(theid) : thename
var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining on your input limit'
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true);
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true);
}
}

</script>

</head>
<body>

<form name="sampleform">

<input type="text" name="george" size=20><br>
<script>
displaylimit("document.sampleform.george","",5)
</script>
<p>

<table>
<tr><td class="main"><input type="radio" name="id[15]" value="18" CHECKED>Up to 5</td></tr>
<tr><td class="main"><input type="radio" name="id[15]" value="19">Up to 7</td></tr>
<tr><td class="main"><input type="radio" name="id[15]" value="20">Up to 10</td></tr>
<tr><td class="main"><input type="radio" name="id[15]" value="21">Up to 12</td></tr>
</table>


<tr><td class="main"><input type="radio" name="id[15]" value="18" CHECKED>Up to 5</td></tr>
<tr><td class="main"><input type="radio" name="id[15]" value="19">Up to 7</td></tr>
</form>
</body>
</html>

Arty Effem
11-02-2006, 04:10 AM
Many thanks krycek for the speedy response. I'm probably missing your hint
because I still can't get it working.

I'll try to explain...

I have a radio group named "id[15]" (a very unhelpful name because of the [] in it) where currently the checked radio button is value 18. I need to change it to 19.

So I'm trying things like

document.sampleform.id[15][19].click()

or

document.sampleform["id[15]"[19]].click()
The only way is to loop through the array (if there's more than one button) and find the one with the specifed value and set its checked property to true. Try this function:
/* Nothing to do with dynamicdrive :) */

function selectRadioByValue( rbSet, rbValue )
{
/*4172747920456666656D206469642074686973*/
var setOK=false;

if(rbSet.length)
{
for(var i=0; i<rbSet.length && rbSet[i].value!=rbValue ; i++)
{}
if(i!=rbSet.length)
{
rbSet[i].checked=true;
setOK=true;
}
}
else
if(rbSet.value==rbValue) //single button
{
rbSet.checked=true;
setOK=true;
}

return setOK;
}In this case the call would be:
selectRadioByValue( document.forms.sampleform['id[15]'], "19" );

RobBass
11-02-2006, 01:47 PM
Thanks Arty Effem. That script worked perfectly.

Took me a while to get my head around what you were doing there. Nice one.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum