Adding an onclick function to go to url in JavaScript?

Question

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>

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 — MagePal Extensions, Oct 25 '12 at 15:29

score 237 · Accepted Answer · answered Oct 25 '12 at 15:28

237

Try

 window.location = url;

Also use

 window.open(url);

if you want to open in a new window.

answered Oct 25 '12 at 15:28

Rick Donohoe

7,081
6
26
38

score 177 · Answer 2 · answered Jul 05 '13 at 07:54

177

Simply use this

onclick="location.href='pageurl.html';"

answered Jul 05 '13 at 07:54

Aamir Shahzad

6,683
8
47
70

19

This opens the link within the same window, while the accepted answer opens in a new window. I prefer this answer's approach – Hamman Samuel Apr 02 '16 at 10:15

score 38 · Answer 3 · edited Jun 13 '16 at 09:19

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/";    
});

score 15 · Answer 4 · answered Oct 25 '12 at 15:30

15

function URL() {
    location.href = 'http://your.url.here';
}

answered Oct 25 '12 at 15:30

T.W.R. Cole

4,106
1
19
26

Moji · Answer 5 · 2014-05-07T13:50:40.313

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 })'" />

edited May 07 '14 at 13:50

answered Apr 29 '14 at 13:56

Moji

5,720
2
38
39

score 11 · Answer 6 · answered Jun 07 '18 at 10:21

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');
});

answered Jun 07 '18 at 10:21

Jack J

181
1
7

score 11 · Answer 7 · answered Jul 13 '19 at 08:43

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='...

answered Jul 13 '19 at 08:43

Darvydas Šilkus

329
3
4

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 '20 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. – Darvydas Šilkus Jan 20 '20 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 '20 at 20:19

score 2 · Answer 8 · answered Oct 25 '12 at 15:32

2

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

$('#something').click(function() { 
    document.location = 'http://somewhere.com/';
} );

answered Oct 25 '12 at 15:32

Nigel

1,291
11
7

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. – John Taylor Oct 25 '12 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 – John Taylor Oct 25 '12 at 15:41

score 0 · Answer 9 · answered Apr 16 '19 at 05:04

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()" />

answered Apr 16 '19 at 05:04

Kamil Kiełczewski

85,173
29
368
345

Adding an onclick function to go to url in JavaScript?

9 Answers9

Linked

Related