jyushinx Posted February 15, 2007 Share Posted February 15, 2007 Hi, I'm having an issue with an OnChange event handler I have assigned to a set of radio buttons in IE7. Each radio button is assigned to an image. When a user clicks a radio button, it triggers the OnChange event handler. This then changes the img.src in my image preview box to the selected image. This works perfectly fine in FireFox, but I am running into a strange problem in IE7. When you select a radio button, the image doesn't change automatically. However, if after selecting the radio button, you click the mouse somewhere on a blank part of the screen the new image loads in. I'm not sure why this is happening. It's almost like the mouse click forces the img to reset itself, thus displaying the new source. Any ideas? Here is my javascript code which works fine in FireFox and sort of in IE function loadImageManagerPreview(document,imageName,classId) { document.getElementById('imagePreview').src = "/graphics/products/"+classId+"/"+imageName; } Quote Link to comment Share on other sites More sharing options...
ozfred Posted February 15, 2007 Share Posted February 15, 2007 Hi, I'm having an issue with an OnChange event handler I have assigned to a set of radio buttons in IE7. Each radio button is assigned to an image. When a user clicks a radio button, it triggers the OnChange event handler. This then changes the img.src in my image preview box to the selected image. This works perfectly fine in FireFox, but I am running into a strange problem in IE7. When you select a radio button, the image doesn't change automatically. However, if after selecting the radio button, you click the mouse somewhere on a blank part of the screen the new image loads in. I'm not sure why this is happening. It's almost like the mouse click forces the img to reset itself, thus displaying the new source. Any ideas? Yes, IE is being strictly standards compliant for a change. The onchange event is supposed to fire when the element loses focus, so when you click on the button, nothing happens until you click somewhere else and cause the button to lose focus. Firefox and other browsers do onchange (for radio buttons) as if it were an onclick. The solution is to use onclick and test the button status, something like: <input type="radio" onclick="if (this.checked){ /* do something */ }" ... > Or to test the status in the function called by onclick: HTML: <input type="radio" onclick="foo(this);" ... > Script: function foo(el) { if (el.checked) { /* el is checked, do something */ } else { /* el isn't checked, do something else */ } } Quote Link to comment Share on other sites More sharing options...
jyushinx Posted February 15, 2007 Author Share Posted February 15, 2007 Well played. That was exactly what it was, and now it works perfectly. And I was all ready to be bitter towards IE. Touche Microsoft. I actually have another quick question regarding these radio buttons now that it works. I have the first radio button set as the default selection. In FireFox, if I select a different radio button and then refresh the page, it doesn't revert back to the default. This is a problem because the image in the preview box matches up with the first radio button. Any idea why this is happening in FF and not IE? Thanks again for the help. Quote Link to comment Share on other sites More sharing options...
ozfred Posted February 15, 2007 Share Posted February 15, 2007 That's just the way they work. You can use window.onload to reset the buttons to the default using: <body onload="document.someForm.reset();" ... > which will reset the entire form. If you want to just set the first button to checked: <body onload="document.someForm.buttonSetName[0].checked = true;" ... > Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.