Need help with "radio buttons" script, please [Archive]

Click to See Complete Forum and Search --> : Need help with "radio buttons" script, please

Deanna475

03-17-2003, 11:56 AM

Hello all. I was thrilled to find a script that would replace those "old ugly radio buttons in your forms" and it's short and sweet but I can't get it to work when I try to modify it to suit my needs.

http://javascript.internet.com/forms/radio-buttons.html

Here's what I'm up to: the script includes a feature to have the name of the "option" appear in an input box above the list of radio buttons. Well, seeing no practical purpose for this and I certainly didn't need it on my page, I removed the reference in the script for the "action" involving this input box. The script still worked fine until I went to add my own variables. Here's what I've got:

<SCRIPT LANGUAGE="JavaScript">






</script>

I removed the line: document.all.action.value = x

And for the buttons themselves, the demo uses this:

<a href="#"><img border="0" src="images/on.gif" width="11" height="11" name=option1
onclick=Check(this.name,"home.asp")></a> option 1

<a href="#"><img border="0" src="images/off.gif" width="11" height="11" name=option2
onclick=Check(this.name,"cadastro.asp")></a> option 2

My options look like this:

<INPUT onclick="setOption(0)" type=radio id="basecolor" name=option checked>Base Color<br>

<INPUT onclick="setOption(1)" type=radio id="facecolor" name=option>Face Color<br>

<INPUT onclick="setOption(2)" type=radio id="trackcolor" name=option>Track Color<br>

.... and this pattern continues for 9 more radio buttons.

How do I adapt my "INPUT onclick=" code to work with the script, and if I didn't remove the reference to the "action" part of the script correctly, what should I have done instead?

Any and all assistance is greatly appreciated.

D.

khalidali63

03-17-2003, 12:02 PM

I am not sure about your question,because the script you have referred to does not use inpyt type radio rather it uses images to simmulate the effect that you'd get from clicking on radio buttons.

Cheers

Khalid

Deanna475

03-17-2003, 12:25 PM

Hi Khalid and thanks for the quick reply. *S* Here is part of the script copied and pasted directly from the page at JavaScript Source:

<input type=text name=action value="option1">
<p>
<font face="Tahoma" size="1">
<a href="#"><img border="0" src="http://javascript.internet.com/img/radio-buttons/on.gif" width="11" height="11" name=option1 onclick=Check(this.name,"")></a>
option 1</font></p>
<p>
<font face="Tahoma" size="1"><a href="#">
<img border="0" src="http://javascript.internet.com/img/radio-buttons/off.gif" width="11" height="11" name=option2 onclick=Check(this.name,"")></a>
option 2</font></p>

Which results in the output looking like this:

http://theinspirationgallery.com/Image2.gif

(The example in my first message came directly from the script as it was emailed to me, and the second example comes directly from the page itself at JavaScript Source.)

The "input type=text" part of the script creates an input box above the radio buttons. I don't want this input box to appear on my page, so I removed the line in the script that pertained to "action" because the word "action" appears in this part of the code:

<input type=text name=action value="option1">

The script still worked as it should until I went to add my own variables to the "onclick" functions and then I got several different error messages regarding "document.all" is null or not an object.

I hope I explained myself better this time. Sorry for any confusion.

D.

Edited in as an afterthought: I realize the script uses images to simulate radio buttons but I'm having troubles adapting it to suit my onclick function. For instance, I can get this far:

My radio buttons as they operate now on my page:

<INPUT onclick="setOption(0)" type=radio id="basecolor" name=option checked>Base Color

If I use the script, I need to adapt the code something like this:

<a href="#"><img border="0" src="images/on.gif" width="11" height="11" name=option onclick=Check(this.name,"")></a>Base Color

The part in red is where I mess up!! (That is, if I already didn't mess up by removing the code in the script referring to "action"). Clear as mud, eh? *S*

Jona

03-17-2003, 01:06 PM

<a href="#"><img border="0" src="images/on.gif" width="11" height="11" name=option1
onclick=Check(this.name,"home.asp")></a> option 1

First of all the variable "y" in your function is never used. So you don't need that, "home.asp" part in there. Second, have you tried <img border="0" src="images/on.gif" width="11" height="11" name="option1" onclick="Check(this.name);setOption(0)"> Have you tried that?

BTW, if you noticed I took off the "home.asp" part. If you're not redirecting onclick, you don't need that. Also the function never uses "y" which would be, in this case, "home.asp." So your function should look like: function Check(x) { instead of function Check(x,y){.

Deanna475

03-17-2003, 01:38 PM

Hi Jona and thanks for your input. I see what you're getting at, about the "x" and "y" part of the script. The demo is showing me how to code the radio button if it were going to redirect the visitor to another page (odd function for a radio button but, hey, I didn't write the demo!!). So, applying your theory of only dealing with "x" and forget about the "y", I used your example:

onclick="Check(this.name);setOption(0)"

... it still kept telling me 'document.all(...)' is null or or not an object.

:(

BTW, I reinstated the script exactly "as is" without removing any references to anything. So the way the author wrote it is the way it is in the <head> section of my document, like this:

<SCRIPT LANGUAGE="JavaScript">






</SCRIPT>

I'll keep messing around with it, but any further feedback or suggestions would be *so* appreciated.

******************************

A moment later: OK, I removed the reference to "y" in the script. So now it reads:



Still get the same error message: 'document.all(...)' is null or or not an object.

I'll keep trying .....

******************************

Another moment later: OK, I added back that input box part of the code just like in the demo (in case that makes a difference, even though I don't want it there):

<input type=text name=action value="option1">

So now it looks like this:

<input type=text name=action value="option">

<a href="javascript:void(null)"><img border="0" src="images/on.gif" width="11" height="11" name=option id="basecolor" onclick="Check(this.name);setOption(0)"></a><label for=basecolor>Base Color</label><br>

Still get the same error message: 'document.all(...)' is null or or not an object.

I'll keep trying .....

******************************

A few minutes later: OK, I tried this:

onclick="Check('setOption(0)'"

and got an Object expected error :(

I'll keep trying .......

******************************

OK, I'm done trying ...... At this point, I'm just moving punctuation around and trying to follow by example and achieving nothing but error messages from syntax errors to expected '}' errors because I don't know JavaScript. If anyone has a solution that they know will work, I'm eager to hear it. And again, in this mess of a message, let me re-iterate:

1. I don't want the input box above my image-generated radio buttons; and
2. All of my existing radio buttons follow this pattern:

<INPUT onclick="setOption(0)" type=radio id="basecolor" name=option checked onFocus="if(this.blur)this.blur()"><label for=basecolor>Base Color</label><br>

<INPUT onclick="setOption(1)" type=radio id="facecolor" name=option onFocus="if(this.blur)this.blur()"><label for=facecolor>Face Color</label><br>

Thank you all very much.

khalidali63

03-17-2003, 03:07 PM

Check ou t the link below..
:D

http://68.145.35.86/temp/Deanna475-CheckBoxProblem.html

Cheers

Khalid

Deanna475

03-17-2003, 03:40 PM

Holy Hannah Khalid!! You wrote a whole new script. Many many thanks for your assistance with my dilemma. So, taking from your source code, I implemented your script as such:

<script type="text/javascript">
/*************************************************
Author : Khalid Ali
Date : March 17,2003
Version : 1.1
Company : NetTech
Description : Check Box simmulation script using images
*************************************************/
function setOption(obj) {
obj.src = "images/on.gif";
var imgDoc = document.getElementsByTagName("img");
var len = imgDoc.length;
for(n=0;n<len;n++){
if(imgDoc[n].name!=null && imgDoc[n].name!=obj.name ){
imgDoc[n].src = "images/off.gif" ;
}
}
document.all.action.value = obj.name
}
</script>

And in the body of my document (using 3 examples but they go as high as "setOption(11)":

<INPUT type="text" name="action" size=14 value="1"><br><br>

<a href="javascript:void(null)"><img src="images/on.gif" width=11 height=11 border=0 name="option" id="basecolor" onclick="setOption(0)"></a><label for=basecolor> Base Color</label><br>

<a href="javascript:void(null)"><img src="images/off.gif" width=11 height=11 border=0 name="option" id="facecolor" onclick="setOption(1)"></a><label for=facecolor> Face Color</label><br>

<a href="javascript:void(null)"><img src="images/off.gif" width=11 height=11 border=0 name="option" id="trackcolor" onclick="setOption(2)"></a><label for=trackcolor> Track Color</label><br>

GOOD NEWS: No error messages and the buttons function as they are intended, meaning when I click "Base Color", the scrollbar base colour of my page changes to the colour I selected, and so on for Face Color and Track Color. I have no doubt that it would work for all of the individual scrollbar elements, page background and text colour which form the balance of the image-generated radio buttons. So that's a plus!

BAD NEWS: We still have that input text box at the top for which I see nor have a purpose for ** and ** the image buttons don't switch on and off accordingly when clicked.

But this is the closest I've been yet to getting rid of those ugly grey system radio buttons. Let's not give up yet. :D

Deanna

PS: If it helps any to see what exactly I'm trying to accomplish, a working version of my page can be seen here:

http://www.theinspirationgallery.com/neo/page_colourizer.htm

The part pertaining to the radio buttons can be found under the comment: 

Still in Beta, but it's coming along. :)

khalidali63

03-17-2003, 03:49 PM

Just delete this line fro the javascript function

document.all.action.value = obj.name

and delete the form element corresponding to the above deleted line

<input type="text" name="action" value="1">

And you are all set,
The code I wrote will work with both NS6+ and IE6+

Njoy.

Khalid

Deanna475

03-17-2003, 04:04 PM

Hi again. *S* Hmmmmm, I seem to still be experiencing the same problem. I deleted the references to that input text box. It's gone! Nada! No more!! But the buttons still don't want to switch on and off as they should when clicked. Maybe there is something else conflicting with the script that's preventing the buttons from turning on and off?

I've uploaded my "test" version of this page here:

http://www.theinspirationgallery.com/neo/page_colourizer3.htm

Your script is at the very top under the META tags and the part pertaining to the image radio buttons can be found under the comment: 

D.

khalidali63

03-17-2003, 04:11 PM

There must be something else you might have screwed up

:D

Here check the link again

http://68.145.35.86/temp/Deanna475-CheckBoxProblem.html

Khalid

Deanna475

03-17-2003, 07:06 PM

Well, I have tried my best to implement your script, but it ain't gonna happen.

Here's what *is* happening:

I moved your script from being the first script at the top of the <head> section to the last script. This improved things a little because at the very least, the image buttons would switch on/off when clicked. That's one point for me. *S*

I then took your source code in the link from your most recent message, and pasted it directly into my HTML editor. One by one, I substituted your variables for my own but nothing that would change the functionality of the script, such as substituting

src = "http://javascript.internet.com/img/radio-buttons/off.gif"

for

src = "images/off.gif"

or

<a href="#"> for <a href="javascript:void(null)">

I added the relevant id="basecolor" and <label for=basecolor> etc. for each option.

I named all of the options name="0" through to name="9"

I didn't touch a single space in the script itself. Just the variables in the code in the <body>.

I didn't add the onclick part and it still read onclick="setOption(this)"

At this point, the buttons switched on and off as they should but naturally no function was executed because onclick was set to onclick="setOption(this)". As soon as I changed (this) to the numeric value that my original radio buttons had ...

Remember it looked like this:

<INPUT onclick="setOption(0)" type=radio id="basecolor" name=option checked onFocus="if(this.blur)this.blur()"><label for=basecolor>Base Color</label><br>

So as soon as I substituted onclick="setOption(this)" for onclick="setOption(0)" all the way to onclick="setOption(9)", the script didn't change the on/off buttons when clicked.

Undaunted, thinking that perhaps because the script was in a "stand alone" document with no onclick="setOption(number)" to execute, I thought transferring what I had into the actual HTML document itself would rectify the on/off problem.

Like I said earlier, I copied the exact script as you wrote it into the bottom of the <head> section and substituted all of my <INPUT>s for the revised code and the results were:

As long as I didn't change onclick="setOption(this)" for onclick="setOption(0)" all the way to onclick="setOption(9)", the on/off buttons switched on and off as they should when clicked. However, the functions the radio buttons were to perform in the first place did not happen because I think (this) means nothing to the script that makes my page work.

Also, the script hijacked all of my images and shows them as the "off" button throughout my page.

When I did change (this) to (0), (1), (2) and so forth, the buttons would not switch on and off nor would the functions the radio buttons were to perform in the first place perform either.

Was I wrong to add the (0), (1), (2) and so forth to the (this) part of the script? If so, how are my buttons supposed to function?

For what it's worth, the page can be seen here:

http://www.theinspirationgallery.com/neo/page_colourizer4.htm

khalidali63

03-17-2003, 07:30 PM

Well its not the code that iis not working because you got it from a working example,
I'll see that whats causing problem in the rest pages code for this to not work properly..

Khalid

Deanna475

03-17-2003, 07:46 PM

Hi again K. I know, the working example worked while it was in a page all by itself. But as soon as I added the (0), (1), etc., even the working example stopped working. :( So part of the problem has to do with substituting the (this) for (0), (1), etc. Also, all of my IMG tags have been hijacked by the script!! I appreciate your taking a look at things on my page. I gotta warn you, there's a helluva lot of JS and CSS on that page and I didn't code it all, my partner did. But he's unavailable for the next few days or else I would torture him with this dilemma instead of you. *S*

khalidali63

03-17-2003, 08:11 PM

You did not implemented the code I provided correctly,multiple errors..
Test this link.

http://68.145.35.86/temp/deanaspage/page_colourizer4.htm

:D

Great page though,seems like you have quite of ways to go as yet.

Cheers

Khalid

Deanna475

03-17-2003, 08:29 PM

Wow, you got the buttons to switch on/off. Great!! Thanks so very much. We're half-way there. Now we just have to get the script to stop hijacking all of the IMG files on the page and make it so that the buttons do something when clicked. Right now, the way it is, you can click any of the 10 buttons and only the base scrollbar colour changes.

BTW, I'm using IE6 on Win98. Maybe it's working on your computer but it's not altogether working on mine, as noted above.

Yeah, it's been one heck of a project from start to finish and you're right, still not finished, although it's getting there. Still a few bugs to work out but the foundation is in place. My partner is working on the bugs (he's the mastermind behind all that JS) while I'm working on the overall site design and costmetics. *S* The radio buttons were part of the cosmetic work. Next I get to tackle the checkmark boxes in the Tools panel. Oh joy!!

Listen, Khalid, if you've got better things to do tonight, don't try and solve this all in one shot. There's nothing there that can't wait until tomorrow. ;)

D.