45

I cannot get onclick="location.href='link.html'" to load a new page in Safari (5.0.4).

I am building a drop-down navigation menu using the <select> and <option> HTML tags. I am using the onclick handler to load a new page after a menu-item is clicked, but nothing happens in Safari. (I have successfully tested in FF & Opera.) I know that there are many onclick bugs in Safari, but I haven't found any solutions that address this specific issue.

You can see a sample of my code below:

<select>
    <option onclick="location.href='unit_01.htm'">Unit 1</option>
</select>

and

<select>
    <option onclick="location.href='#5.2'">Bookmark 2</option>
</select>

I do not (and prefer not) to have any javascript embedded in the head section of my HTML. I am developing the page for someone who does not know how to use javascript--so the simpler the code, the better.)


What JavaScript code would make the menu-item clickable in all-browsers? (Please verify compatibility with IE.)

Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
Brandon Lebedev
  • 2,717
  • 6
  • 24
  • 35
  • 3
    If you're developing the page for someone who doesn't know JavaScript, surely it's better to keep it out of the way of the HTML - eg: in a separate `.js` file? – Town Jun 20 '11 at 23:22
  • 2
    I'm not answering the question because I disagree with the premise. Semantically, a navigation menu is a list of links, not an option that is being selected, and I implement drop-down multi-level menus as `
    • Item
      • ` etc. Most navigation tutorials I've seen also use this strategy. Mine also work in pure CSS without even needing JavaScript, although I further enhance them with JS.
     – Stephen P Jun 20 '11 at 23:22
  • @Stephen P: It's fine to disagree, but why not post your code as an alternative way to address the problem? – Town Jun 20 '11 at 23:25
  • 1
    @Town - because I've been chastised and downvoted for "not answering the question that was asked" too many times. However, it doesn't hurt to point to the classic [Suckerfish Dropdowns](http://www.alistapart.com/articles/dropdowns) article that uses `
    • ` and pure CSS, from way back in 2003.
     – Stephen P Jun 20 '11 at 23:36
  • @Stephen P: Personally I see promoting good practice as part-and-parcel of contributing to the community - it's a shame not everyone sees it that way! :) – Town Jun 20 '11 at 23:43
  • @Stephen P: Thank you for posting an alternative method. I will at least use it for non-JS fallback. – Brandon Lebedev Jun 20 '11 at 23:50
  • 1
    @Town: I agree, and (with some trepidation) did some of that today and it turned out well, so I'm creeping back. My code for 3 level `Menubar/Menus/Items+(Submenus/Items)` has quite a bit of CSS to post, and I felt there are enough articles already out there. Thanks for the encouragement. – Stephen P Jun 20 '11 at 23:54
  • Just put ";" after the javascript command you want to execute. – NaN May 04 '17 at 11:32

6 Answers6

127

Try this:

onclick="javascript:location.href='http://www.uol.com.br/'"

Worked fine for me in Firefox, Chrome and IE (wow!!)

Rafael Zottesso
  • 1,554
  • 2
  • 10
  • 10
  • 15
    No! The lack of jQuery in this method defies the morals of modern webdevelopment, don't use such basic JavaScript unless you want to be made fun of! – KittenCodings Feb 04 '16 at 13:27
  • 16
    Using jQuery is cause to be made fun of. If you can't do your own work, you can't really call yourself a programmer? Rafael's solution is correct and far more appropriate than using jQuery for such a simple task. – Ron B. Feb 20 '17 at 00:45
  • 7
    [off-topic] @RonB. I believe KittenCodings was being sarcastic – Tivie Oct 23 '17 at 21:00
36

Use jQuery....I know you say you're trying to teach someone javascript, but teach him a cleaner technique... for instance, I could:

<select id="navigation">
    <option value="unit_01.htm">Unit 1</option>
    <option value="#5.2">Bookmark 2</option>
</select>

And with a little jQuery, you could do:

$("#navigation").change(function()
{
    document.location.href = $(this).val();
});

Unobtrusive, and with clean separation of logic and UI.

duplode
  • 33,731
  • 7
  • 79
  • 150
Matthew Abbott
  • 60,571
  • 9
  • 104
  • 129
  • 3
    This works. For all JS newbies out there, you need to wrap the above JS with `$(document).ready(function(){ }` if you're going to insert it into the head of your html. Check out [this page](http://stackoverflow.com/questions/5853787/script-does-not-work-when-on-head) for more details. – Brandon Lebedev Jun 21 '11 at 12:29
  • @Matthew:: Your last **` not ` – Universal Grasp Apr 04 '15 at 03:17
  • 1
    I hate seeing advice like this. Even though it is old, using jQuery to do everything is just wasteful. –  Dec 28 '15 at 06:15
6

Give this a go:

<option onclick="parent.location='#5.2'">Bookmark 2</option>
Richard Hedges
  • 1,180
  • 5
  • 14
  • 39
4

You can try this:

 <a href="link.html">
       <input type="button" value="Visit Page" />
    </a>

This will create button inside a link and it works on any browser

garatu
  • 350
  • 3
  • 13
  • 1
    While this code snippet may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Box Box Box Box Jun 10 '16 at 16:06
  • OP asked for a javascript solution, and you provided an HTML one. But I give you points for the simplicity. No need for JS if you can do it with pure HTML. – user3407764 Mar 17 '18 at 23:44
2

I had the same error. Make sure you don't have any <input>, <select>, etc. name="location".

Jacob NP
  • 21
  • 1
0

try

<select onchange="location=this.value">
    <option value="unit_01.htm">Unit 1</option>
    <option value="#5.2" selected >Bookmark 2</option>
</select>
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345