Hiya,

Was just wondering if anyone is any good with onChange events in forms and can help me figure out why this won’t work in certain Browsers?

It works fine in Safari (OSX) and some versions of Firefox (OSX) but not all and I’m not sure what IE does as I don’t have access to it at the moment.

Was just wondering if I’m doing something blatantly wrong of if there is a better way of going about this?

My code so far is this :

Under that then I have a weblog entries tag which is used to output the different options. As mentioned above in Safari it all works fine, the page refreshes and goes to the correct URL but in certain versions of Firefox (read as most versions - not too sure where I was when it did work on Firefox) it won’t work. Also I’m not sure if this works in Firefox on Windows or IE on windows.

I’m just wondering if there’s a better way of doing these things perhaps?

Thanks for any help on this.

Best wishes,

Mark

Mark, care to point us to an actual page? Are you using a JS framework? (jQuery, Mootools…)

as far as radio boxes and checkboxes go, you should use the click event instead of change (IE doesn’t fire the change event until the radio button/checkbox has lost focus).  that said, I’ve never encountered a problem using change for select boxes, although perhaps it’s a similar problem where IE still thinks the dropdown has focus and won’t fire til it loses focus.

other than that… yeah need a link to a demo of the problem

Hi both,

Unfortunately I can’t provide a link as the data which is being shown on the page is highly confidential. I shall hopefully make one on my own (not built yet ) site tonight and provide a link to that instead.

As mentioned before it all works fine in Safari but not Firefox. This is OSX by the way.

Also if it helps at all no JS frameworks at all although I’m not against doing that if I have to and as a pointer I used the code from the Category Dropdown Menu in the ExpressionEngine documentation if that helps at all?

Will hopefully get a page up tonight though.

Best wishes,

Mark

Okay here we go, a page to test with.

Drop Down Test

If it works for you then you will get redirected to a page which asks for a username and password which is needed as this is sensitive data but will demonstrate if the actual drop-down redirect works or not though.

Other than the fact that my form isn’t 100% valid code due to not having fieldsets (I seriously hope that’s not it now I’ve said that ) then I can’t really see much else that it could be.

An extra pair of eyes on this would be great so thanks for any help on it.

Best wishes,

Mark

yeah I’d use jQuery for that, just easier to attach the events once since they’re all roughly the same.

something like:

I assume that the point of these dropdowns is to send you to a new page.. if not then the above code won’t be quite right

edit: [removed] = window dot location

Mark, on that test page you are loading jQuery so I did a little test using it.

I removed the inline event handler:

and moved event handling over to a jQuery snippet:

(obviously surrounded by script tags but you know the forum strips these out).
I did a test run with the dropdowns: 1 dropdown using jQuery, the other 2 using inline event handlers. Only the jQuery dropdown worked in Safari, FF on Mac OS X and FF and IE7 on WinXP.
Hope this helps!

e-man / ender,

Thank you thank you!!

All seems to be working fine. Will do some testing but that’s great, thanks.

One last thing I was wondering though as I have three drop-downs on that page and my Javascript knowledge is absolute pants I was wondering if there would be an easy way to make that function work for all three differently named drop-downs instead of just the one instead of me copying the function two more times and changing the names in them?

If not then no problem will just do that instead but thought I would ask nevertheless.

Thanks again for the help on this one.

Best wishes,

Mark

my code should do that already

means for each select element that is a child of the element with ID=drop, do stuff.

since all three select boxes were children of #drop it will run that function for any of the three that are changed.

Hiya,

ender - 25 June 2009 03:12 PM

my code should do that already

$("#drop select").change

means for each select element that is a child of the element with ID=drop, do stuff.

since all three select boxes were children of #drop it will run that function for any of the three that are changed.

Sorry for not coming back sooner on this one although to tell the truth I could have sworn I did already post back to this but seems that I didn’t so sorry about that.

Thanks again both for the code. Got it working in the end with I think it was a mix of the two so thank you both for all the help.

Would still love to hear if anyone knows why the original code was mucking up in certain browsers though?

Best wishes,

Mark

jQuery has sorta spoiled us all on the browser compatibility front. so the answer you’re likely to get to that question is that you weren’t using jQuery to do it.

I honestly used to know a bunch of browser incompatibilities when it came to javascript, but jQuery’s goal is to be the same in all the browsers it supports… so I don’t have to remember which things work in which browsers anymore.

Yep I suppose the old adage of “If It Ain’t broke, don’t fix it” comes to mind here. I’ll just live with the fact that it is working and I suppose not get too worried about why the other one didn’t.

It’s just that most of the time I like to know what has happened so that it’s in my mind in case it ever happens again so that I can fix it quickly. Now I’m running with both your new versions though I suppose I can just forget this one and get on with life though

Thanks again both for all your help.

Best wishes,

Mark