...

View Full Version : Check Unchecked Radio



rwt
07-09-2007, 09:16 AM
have multiple radio check buttons, and one of them, if checked, changes a div to a drop down menu.

The problem is I can't find a way to go back the way it was before clicked.

this is the javascript code:


function showinput(el){
{
put('<select name="country" size="1"><option>test</option>');
}
}

The put function:

function put(text){
obj = document.getElementById('theme');
obj.innerHTML = text;
}

Now in showinput, how can I tell it to change back when radio is not checked?

please help

cheers

vwphillips
07-09-2007, 09:46 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>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function showinput(el){
var rads=el.form[el.name];
put('<select name="country" size="1"><option>test</option>',rads);
}

function put(text,rads){
obj = document.getElementById('theme');
if (!rads[0].html) rads[0].html=obj.innerHTML;
obj.innerHTML =(rads[0].checked)?text:rads[0].html;
}
/*]]>*/
</script></head>

<body>
<form>
<input type="radio" name="tom" onclick="showinput(this);" />
<input type="radio" name="tom" onclick="showinput(this);" />
</form>
<div id="theme" >
Some Content
</div>
</body>

</html>

rwt
07-09-2007, 11:10 AM
Hey, thanks a lot. that was quick. I'm gonna check it out and get back to you.
I don't understand much though.... would you mind explaining just a bit?

Also, I'm using an external .js file to load the codes... does it change anything? because it isn't working!
Could it be the position of the radio? because mine is the 17th...?

check out my results (http://www.allan.ch/rwt/junk/ufern/IDKing/option1.html).
Select price plan then click next. the 2nd page is the place were I wanna change according to selection. The one that should change is Patriotic (2nd table, in the center column).

Thanks again,
cheers ... rwt

vwphillips
07-10-2007, 11:57 PM
radio div ' Patriotic' is rad[16]
radio div ' Science' is rad[17]
note:Javascript starts counting from 0
so when you check rad[16] to call the function rad[17] is unchecked and nothing happens

vwphillips
07-11-2007, 01:11 AM
also if you remove a radio by changing the innerHTML of 'theam' the radio button array and indexing will change.

Will try to figure what you are trying to achieve and may be back tomorrow.

vwphillips
07-11-2007, 03:25 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Option 1</title>
<script src="prototype.js"></script>
<script src="global.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/


function zxcInit(zxcfrm,zxcname){
var zxcrads=document[zxcfrm][zxcname];
for (var zxc0=0;zxc0<zxcrads.length;zxc0++){
zxcAddEvt(zxcrads[zxc0],'zxcShowHideSelect','click');
}
}

function zxcShowHideSelect(){
var zxcrads=this.form[this.name];
for (var zxc0=0;zxc0<zxcrads.length;zxc0++){
zxcp=zxcrads[zxc0];
while (zxcp.parentNode){
if (zxcp.tagName=='TD') break;
zxcp=zxcp.parentNode;
}
var zxcsels=zxcp.getElementsByTagName('SELECT');
if (zxcsels[0]){
zxcES(zxcsels[0],{position:(zxcrads[zxc0].checked)?'relative':'absolute',visibility:(zxcrads[zxc0].checked)?'visible':'hidden'});
}
}
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

var zxcEvt=0;

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

/*]]>*/
</script>
</head>

<body onload="zxcInit('form1','radio2');">




<form name="form1" method="post" action="/rwt/junk/ufern/IDKing/option1.html">

<table width="400" border="0">
<tr bgcolor="#F0F0F0">
<td width="133"><label>
<input name="radio" type="radio" id="Your Name" onclick="hideinput(this.value);" value="Your Name" checked="checked">
Your Name</label></td>
<td width="133"><label>
<input type="radio" name="radio" id="Personal Text" value="Personal Text" onclick="showinput(this.value);">
Personal Text</label>
<label> </label></td>

<td width="133"><label>
<input type="radio" name="radio" id="None" value="None" onclick="hideinput(this.value);">
None</label></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="165"><div align="left" id='debug'></div></td>
<td>&nbsp;</td>
</tr>

</table>
<hr align="left" width="400" />
<table width="400" border="0">
<tr bgcolor="#F0F0F0">
<td><input type="radio" name="radio2" id="radio" value="Abstract" />
Abstract</td>
<td><label>
<input type="radio" name="radio2" id="military" value="military" />

Military</label></td>
<td><label>
<input type="radio" name="radio2" id="male" value="male" />
Male</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="radio2" id="anime" value="anime" />
Anime</label></td>

<td><label>
<input type="radio" name="radio2" id="music" value="music" />
Music</label></td>
<td><label>
<input type="radio" name="radio2" id="places" value="places" />
Places</label></td>
</tr>
<tr bgcolor="#F0F0F0">
<td><label>

<input type="radio" name="radio2" id="technology" value="technology" />
Technology</label></td>
<td><label>
<input type="radio" name="radio2" id="nature" value="nature" />
Nature</label></td>
<td><label>
<input type="radio" name="radio2" id="religious" value="religious" />
Religious</label></td>

</tr>
<tr>
<td><label>
<input type="radio" name="radio2" id="fantaisy" value="fantaisy" />
Fantaisy</label></td>
<td><label>
<input type="radio" name="radio2" id="oceanic" value="oceanic" />
Oceanic</label></td>

<td><label>
<input type="radio" name="radio2" id="scenery" value="scenery" />
Scenery</label></td>
</tr>
<tr bgcolor="#F0F0F0">
<td><label>
<input type="radio" name="radio2" id="fire" value="fire" />
Fire</label></td>

<td><label>
<input type="radio" name="radio2" id="space" value="space" />
Outer Space</label></td>
<td><label>
<input type="radio" name="radio2" id="scifi" value="scifi" />
Sci-Fi</label></td>
</tr>
<tr>
<td><label>

<input type="radio" name="radio2" id="food" value="food" />
Food</label></td>
<td>
<div align="left" id='theme'>
<select style="position:absolute;visibility:hidden;" name="country" size="1">
<option selected="selected">-- Please Select Country --</option>
<option>Afghanistan</option>
<option>&Aring;land Islands</option>
</select>
<input type="radio" name="radio2" id="patriotic" value="patriotic" />
Patriotic
</div>
<label></label></td>
<td><label>
<input type="radio" name="radio2" id="science" value="science" />
Science</label></td>

</tr>
<tr bgcolor="#F0F0F0">
<td><input type="radio" name="radio2" id="videogames" value="videogames" />
Computer Games</td>
<td><label>
<input type="radio" name="radio2" id="patterns" value="patterns" />
Patterns</label></td>
<td><input type="radio" name="radio2" id="sports" value="sports" />
Sports</td>

</tr>
<tr>
<td><label>
<input type="radio" name="radio2" id="holidays" value="holidays" />
Holidays</label></td>
<td><label>
<input name="radio2" type="radio" id="random" value="random" checked="checked" />
Random</label></td>
<td><label>

<input type="radio" name="radio2" id="movies" value="movies" />
TV/Movies</label></td>
</tr>
<tr bgcolor="#F0F0F0">
<td><label>
<input type="radio" name="radio2" id="horror" value="horror" />
Horror</label></td>
<td><label>
<input type="radio" name="radio2" id="female" value="female" />

Female</label></td>
<td><input type="radio" name="radio2" id="vehicules" value="vehicules" />
Vehicules</td>
</tr>
</table>
<hr align="left" width="400" />
<p>If you have any wishes you want to add</p>
<p>

<label></label>
<textarea name="addwish" cols="40" rows="5" id="addwish"></textarea>
</p>
<hr align="left" width="400" />
<p>
<label>
<input type="submit" name="next2" id="next" value="Next" />
</label>

</p>
</form>
your current plan is of $9</p>

</body>
</html>

rwt
07-11-2007, 04:37 PM
awesome, its works much better now.
thank you very much...

I still have to make adjustments to how it looks, but at least its doing something.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum