138

I am using this fancy little JavaScript to highlight a field as the user hovers over it. Could you please tell me if there is a way of adding an onclick function which will act as a link and go to a URL?

<script>
         $(function() {
            $('tr').hover(function() {
                $(this).css('background-color', '#eee');
                $(this).contents('td').css({'border': '0px solid red', 'border-left': 'none', 'border-right': 'none'});
                $(this).contents('td:first').css('border-left', '0px solid red');
                $(this).contents('td:last').css('border-right', '0px solid red');
            },
            function() {
                $(this).css('background-color', '#FFFFFF');
                $(this).contents('td').css('border', 'none');
                $('a#read_message.php').click(function(){ URL(); });
            });
        });
        </script>
2
  • How do I get the url value, is it a link in one of the table cells or does they all go to the same url Oct 25, 2012 at 15:29
  • 3
    You have a rather strange id there '#read_message.php'?
    – Alex Gill
    Oct 25, 2012 at 15:41

9 Answers 9

241

Try

 window.location = url;

Also use

 window.open(url);

if you want to open in a new window.

179

Simply use this

onclick="location.href='pageurl.html';"
1
  • 19
    This opens the link within the same window, while the accepted answer opens in a new window. I prefer this answer's approach Apr 2, 2016 at 10:15
38

In jquery to send a user to a different URL you can do it like this:

$("a#thing_to_click").on('click', function(){
     window.location = "http://www.google.com/";    
});

this way will work too but the above is the newer more correct way to do it these days

$("a#thing_to_click").click(function(e){
         e.preventDefault();
         window.location = "http://www.google.com/";    
});
15
function URL() {
    location.href = 'http://your.url.here';
}
14

HTML

<input type="button" value="My Button" 
onclick="location.href = 'https://myurl'" />

MVC

<input type="button" value="My Button" 
onclick="location.href='@Url.Action("MyAction", "MyController", new { id = 1 })'" />
11

If you would like to open link in a new tab, you can:

$("a#thing_to_click").on('click',function(){
    window.open('https://yoururl.com', '_blank');
});
11

In case you're dealing with <a> tag, and you want to interrupt going to the default href you should use this instead.

Go to default url (yahoo):

<a href="https://yahoo.com" onclick="location.href='https://google.com';"> 

Go to new url (google) onclick:

<a href="https://yahoo.com" onclick="this.href='https://google.com';">

By using this you're interrupting the current browser onclick event and changing href before continuing to default behaviour of <a href='...

3
  • Hi @Darvydas, the above code is working as expected but how to wait until page loads to perform another event on the newly loaded url.?
    – FayazMd
    Jan 18, 2020 at 21:23
  • @FayazMd not sure what you're trying to do? Usually if it's JavaScript inside the DOM (currenty inside DOM's element a) as a web page you can not control JS behaviour on the next page (where you're redirecting the browser page). When user leaves the page it's done. Unless you control the second page too, and might listen for page load there for each user and check document.referrer to know if it's the right person. Also, it might be another story if you're using something like an extension/add-on for the browser that can listen to page URL changes. Jan 20, 2020 at 19:28
  • Hi @Darvydas, thank you for your reply. I want to give a try as following. in the browser console, using javascript with self executing function may be 1) I want to load one of my websites url and 2) want to wait until it completely loads 3) so that, that web page has a table from which I need to extract all the rows. I can able to perform step 1 and if I am on already loaded website then in console I am able to extract table rows (in javascript code). But, when I am trying to write code sequentially for above steps, failing at step 2.
    – FayazMd
    Jan 22, 2020 at 20:19
2

Not completely sure I understand the question, but do you mean something like this?

$('#something').click(function() { 
    document.location = 'http://somewhere.com/';
} );
2
  • yes, basically the javascript is set to highlight the table fields as a user scrolls/hovers over the table content/information. i would like to make it seem like the highlighted field is clickable so they are linked to a page. if that makes any more sense. sorry if it doesnt. Oct 25, 2012 at 15:40
  • solved it. just adapted ur code slightly instead of using # i put in tr to represent the table and it worked. thanks Oct 25, 2012 at 15:41
0

try

location = url;

function url() {
    location = 'https://example.com';
}
<input type="button" value="Inline" 
onclick="location='https://example.com'" />

<input type="button" value="URL()" 
onclick="url()" />

Not the answer you're looking for? Browse other questions tagged or ask your own question.