Does this javascript work well across browser?

I followed this method to open a new page depending on which option is chosen in a <select> element:

<form name="jump1">
<select name="myjumpbox"
 OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value">
     <option selected>Please Select...
     <option value="http://www.davesite.com/">davesite.com
     <option value="http://www.neonlollipops.com/">neonlollipops.com
     <option value="http://www.about.com/">about.com
</select>
</form>

http://www.davesite.com/webstation/js/theory1jump.shtml

Does this method work very well across browsers?

If it does, you’re lucky.

I would try cleaning up the errors - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.davesite.com%2Fwebstation%2Fjs%2Ftheory1jump.shtml&charset=(detect+automatically)&doctype=Inline&group=0 - before worrying about cross-browser issues.

Plus the fact, inline event handlers are clunky

Plus the fact, it’s not accurate enough. Whenever you can, you should be as specific as possible. :slight_smile:

To begin with, location is a property (and an object) of the global object, window. But, it’s always possible that the current object from which the above code is executed to be different from window, and it may also have a similar property, location. “What are the odds!” You know, they’re actually pretty good. Think geolocation.

In order to answer your question, you should check if the following are cross browser: window.location.href, onChange, select.options[selectedIndex]. The first two are cross browser, what remains to verify is the select object.

I don’t think that site is anything to do with tonearm except that he was following the method described there :slight_smile: (but I may be wrong)

I believe the issue relates to this thread

No, I meant specific as in window.location.href instead of just location.href. :slight_smile:

inline event handlers are clunky

I would actually like to use inline in this case.

I don’t think that site is anything to do with tonearm except that he was following the method described there

Exactly, that’s not my site, I was just following the example there.

In order to answer your question, you should check if the following are cross browser: window.location.href, onChange, select.options[selectedIndex]. The first two are cross browser, what remains to verify is the select object.

Do I need to test it in a bunch of different browsers to find out?

Is there another inline method for this that works better across browsers?

Might I ask why?

There are three possible reasons

  1. Many of his visitors are still using Netscape 4 and so it has to work in that browser.
  2. He’s taking a history of JavaScript class and so has to write the script the way it had to be written back in the 20th Century
  3. Ignorance - he doesn’t understand how outdated and error prone that approach is.

#3. Outdated is OK but error-prone is not. I guess that answers my original question. This inline code will not work well across browsers?

<option selected>

should be closed

</option selected>

Not necessarily.

The following is quite valid:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>This validates</title>
  </head>
  <body>
    <select>
     <option selected>Please Select...
    </select>
  </body>
</html>

Try it out here: http://validator.w3.org/check

Yes, it will work well.

The main issues with inline JavaScript are:

  • no reusability and bigger HTML file size. If you have 10 select elements you’ll have the code duplicated 10 times
  • no caching
  • difficult maintenance for your code base

My guess is that the author wanted to keep things simple. But he doesn’t actually imply you should use this code for anything else than introducing yourself with the JavaScript DOM API.

A good sign a developer is serious about web development is when it keeps the HTML, CSS and JavaScript separated

http://stackoverflow.com/questions/12287672/links-in-select-dropdown-options

and even the JavaScript code is kept modular (AMD), in development stages, at least.