• Quick note - the problem with Youtube videos not embedding on the forum appears to have been fixed, thanks to ZiprHead. If you do still see problems let me know.

Simple javascript query

Rat

Not bored. Never bored.,
Rat
Joined
May 19, 2003
Messages
10,629
Location
Leicester, UK
My brain appears to have stopped working, so I wonder if anyone can help with a simple bit of javascript.

I have a list of items, some of which are exclusive and some of which are not, and so some have radio buttons and some have checkboxes. Basically, I want some options to be visible or otherwise (by changing 'display' to either none or block) depending on the state of the checkboxes. The onchange handler seemed to be my best option, but it's not working like I expected. Essentially, if a radio button or check box is selected, a particular related block of text should be visible; if it is deselected, the text should vanish.

At the moment, for example, using radio buttons, if I select radio1, the text (initially display: none) appears as expected. If I then select radio 2, it doesn't disappear. If I select radio1 again, it disappears again. This is obviously not what I want. If I use onclick instead, the text appears and disappears each time I click the same radio button, which makes even less sense. The visibility (or rather display) of the text needs to depend on the on/off state of the radio or checkbox.

Am I missing something really obvious? Is there a different event handler I can use or is this going to need more complex scripting? Because it's been a while since I was competent in anything more than basic scripting.
 
Some sample code would be helpful.

In general, if you want to change what is displayed without a reconnection to the server, then that needs to be explicitly defined as a local function.
 
Well the code in the page is just a mix of checkboxes and radio buttons (with labels) and some blocks of text (as divs) that start out with display:none and that I hope to make visible and make reinvisible depending on which checkboxes etc are selected and deselected.

I already have a function that makes things visible and invisible, to wit:
Code: 
function showHide(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
And that works fine when it's triggered by, say, an onclick event. What I'm trying to do is trigger it according to whether, say, a checkbox is selected. I can bodge this for checkboxes, in that onclick more or less works, since clicking them selects and deselects them. For radio buttons, this is not the case.
 
Last edited:
You can make an onclick event for radio buttons which pass a value to a function... for example (please excuse the poor coding on-the-fly...)

Code: 
<input type="radio" name="1" value="1" onClick="showHide(1)">
<input type="radio" name="2" value="2" onClick="showHide(2)">

Then use the parameters to hide/show divs.

Is that what you're getting at?

Edit:

OK, I see I kinda misread the original question (in light of the later post) - the way I would do it is for radio buttons possibly have another fn (as in an additional one to the checkbox one) which has some kind of case select which shows/hides the respective divs... Or am I shooting wide of the mark here? It's pretty difficult to tell without some more code.
 
Last edited:
It is, but that's what I've got now and it doesn't quite work for radios. For checkboxes, that's fine, but with radios, if I have two options, clicking the first radio will make div1 appear. So far so good. If I now click on radio2, radio one is deselected (as is the nature of radios), but div1 will not disappear. Also, clicking radio1 twice will make the div appear and then disappear. No reason to click the same one twice, of course, but people are people and will click in random places.
 
Having thought a little more about it, you could have a fn whose job it is to hide ALL of the divs to be controlled by the radio buttons, then call it from the showHide() function before making the relevant div visible. That should work.
 
tuoni said:
Having thought a little more about it, you could have a fn whose job it is to hide ALL of the divs to be controlled by the radio buttons, then call it from the showHide() function before making the relevant div visible. That should work.
Click to expand...


This. You have to go for each of the units with getElementsByName(unit)[x] and hide the effect they had, before you can consume another one and pretend it was the first. :p
 
Well, without seeing how you bind the events and without knowing which browsers you're using, it could be to do with what your onchange() handler returns.
In IE, if you return false (this is from memory so could be upside down) then the next radio box in the group fires its event. In real browsers you just get one change event per group.
 
Although I'm using FF, it's most important that it works in IE. This is not a constraint that I've imposed, but it's something I'm knocking up at work, and that's what most folks there are going to be using.

So it looks like I'm going to have to do it the way tuoni/CE prescribe, and make it hide everything on each click, and then display the one I actually want. What an almighty pain in the arse.
 
People are right:

You don't tell the thing to turn off any visible pieces of text and quite surprisingly, it doesn't.

The code will invert the visibility of any item it's used on. fine for checkboxes.

But for radio buttons, you need to do something a little more complicated.

It's been a while that I played with JS, so correct me if I am wrong:

A group of radiobuttons all have the same name, right? So just ensure that the function knows which group and which button is triggering it, and then set your visibilities accordingly.
 
But the way it works in my head is that each radio button has something like "onselect='maketextappear' ondeselect='maketextgoaway'" and the fact that it doesn't work this way in reality is indicative of a serious failure on the part of javascript, or possibly on the part of reality.
 
Rat said:
But the way it works in my head is that each radio button has something like "onselect='maketextappear' ondeselect='maketextgoaway'" and the fact that it doesn't work this way in reality is indicative of a serious failure on the part of javascript, or possibly on the part of reality.
Click to expand...

It's late here, so we might be talking about entirely different things ...

yes, it should work like *that* also. And it is a lot smarter than what I have suggested.

Here's your problem: Your code example doesn't call any ondeselect-function, does it?

Have you tried defining onChange for both radio buttons? I think you're right, it should do the trick.
 
It is late here also, so I shall try more options tomorrow. I think, but now can't remember, that when I select radio2, no event is triggered (as far as I could tell) on radio1, even though it is de facto deselected at the same time. I will indeed try again putting the same function on both, obviously with their targets adjusted as necessary.
 
There isn't an onDeselect event as far as I'm aware. And even if you declare your radio buttons as an array, they will all act independently of each other, the array part is purely used for processing them (it returns the value of whichever radio button has been selected)

I can't think of a way to do it other than the way I'd suggested this morning (or, technically for us two, yesterday morning...)
 
Rat said:
It is late here also, so I shall try more options tomorrow. I think, but now can't remember, that when I select radio2, no event is triggered (as far as I could tell) on radio1, even though it is de facto deselected at the same time. I will indeed try again putting the same function on both, obviously with their targets adjusted as necessary.
Click to expand...

onChange should be triggered. If not, you'll have to extend your function to hide all other relevant text as well.
 
May I also suggest FireBug for all your JS needs. Helped me no end when I used to do this day-in-day-out
 
Rasmus said:
onChange should be triggered. If not, you'll have to extend your function to hide all other relevant text as well.
Click to expand...

Problem I see with onChange is you would still need to keep track of div/radio button states in your JS.
 
tuoni said:
Problem I see with onChange is you would still need to keep track of div/radio button states in your JS.
Click to expand...

I am assuming that clicking one radiobutton should triggerto onchange-events: One for the button you activated, and one for the previously activated button. So each trigger only has to pass on where it was called from, right?
 
You must log in or register to reply here.

Back
Top Bottom