Javascript location href on button click

How to make a button redirect to another page using jQuery or just Javascript

I am making a prototype and I want the search button to link to a sample search results page. How do I make a button redirect to another page when it is clicked using jQuery or plain JS.

I had asked for js because I didn’t imagine that a simple HTML solution was available. Thanks it solved my purpose.

15 Answers 15

$('button selector').click(function()< window.location.href='the_link_to_go_to.html'; >) 

According to this stackoverflow question and answer, one should lean towards window.location and not document.location as it’s not the canonical way.

Without the return false , hitting the «Enter or Return key» might just take you to the current url rather than redirecting to the new link. Especially useful, when you have a text input control which you would like to post to a different url when you hit the enter/return key.

That’s not a very good explanation. The return value indicates whether to continue processing the event. By default, the event will continue to bubble up, and may trigger other actions, such as submitting a form, or going to a link, or nothing. However, you really want to «absorb» the event here. By returning false, the event processing will end here.

thanks — the return false saved me — was wondering why the url woudln’t change — but alas some other script must have continued processing the click.

Better yet, since you are just going somewhere, present the user with the standard interface for «just going somewhere»:

Although, the context sounds like «Simulate a normal search where the user submits a form», in which case the first option is the way to go.

+1 for the form. Since it will be a proper search form eventually you should do it like that now if possible.

@ayjay — Clicking a submit button only submits a form if the submit button is associated with that form. Putting the input in it is the traditional and best supported way to do that.

@mimi — No, it doesn’t. Form resubmit problems only occur when you are making a request which is not «safe» (in which case it should be a POST form … but the question was asking about simple navigation, so there is no reason not to think it is safe). Browsers only warn people about the possibility when the request may not be safe (so they won’t in this case because it isn’t method=»POST» ).

In your html, you can add data attribute to your button:

Then you can use jQuery to change the url:

$('.mybtn').on('click', function(event) < event.preventDefault(); var url = $(this).data('target'); location.replace(url); >); 

No need for javascript, just wrap it in a link

 location.href = "newpage.html" 

in the button’s onclick event.

You can use window.location

Or you can just make the form that the search button is in have a action of the page you want.

this is the FASTEST (most readable, least complicated) way to do it, Owens works but it’s not legal HTML, technically this answer is not jQuery (but since jQuery is a pre-prepared pseudocode — reinterpreted on the client platform as native JavaScript — there really is no such thing as jQuery anyway)

You can use this simple JavaScript code to make search button to link to a sample search results page. Here I have redirected to ‘/search’ of my home page, If you want to search from Google search engine, You can use «https://www.google.com/search» in form action.

 
Enter your search text:   
  

Use a link and style it like a button:

And in Rails 3 with CoffeeScript using unobtrusive JavaScript (UJS):

Add to assets/javascripts/my_controller.js.coffee :

$ -> $('#field_name').click -> window.location.href = 'new_url' 

which reads: when the document.ready event has fired, add an onclick event to a DOM object whose ID is field_name which executes the javascript window.location.href=’new_url’;

There are a lot of questions here about client side redirect, and I can’t spout off on most of them…this one is an exception.

Redirection is not supposed to come from the client…it is supposed to come from the server. If you have no control over the server, you can certainly use Javascript to choose another URL to go to, but…that is not redirection. Redirection is done with 300 status codes at the server, or by plying the META tag in HTML.

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Adding an onclick function to go to url in JavaScript?

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?

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

9 Answers 9

if you want to open in a new window.

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

This opens the link within the same window, while the accepted answer opens in a new window. I prefer this answer’s approach

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

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

Go to new url (google) onclick :

By using this you’re interrupting the current browser onclick event and changing href before continuing to default behaviour of

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

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.

Источник

How to redirect page on button click event

I am using a button on my form. How do I link to another web page/file when clicking on that link? Here is the code I tried, but does not work.

You should really clean up the title of this question. I’m not exactly sure what you’re asking, otherwise I’d try to myself

No problem, just thought it wouldn’t really be useful when looking at a list of questions or for searching purposes

5 Answers 5

yup, wanted to do that but I had to wait like 60secs and went to have a victory dance first. Thanks again

set the url you want to go in action attribute. then use a submit instead of button .
Here is an example.:

Or you can also Do it like this

nav < position:fixed; bottom:350px; left:600px; >nav ul ul < display: none; >nav ul li:hover > ul < display: block; >nav ul < background: #FFD700; box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; color:black; >nav ul:after < content: ""; clear: both; display: block; >nav ul li < float: left; >nav ul li:hover < background: #FFD700; color:white; >nav ul li:hover a < color:black; >nav ul li a < display: block; padding: 25px 40px; color: maroon; text-decoration: none; >nav ul ul < background: #CFB53B;border-radius: 0px; padding: 0; position: absolute; top: 100%; >nav ul ul li < float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; >nav ul ul li a < padding: 15px 40px; color: #fff; >nav ul ul li a:hover

While this might technically work (haven’t actually tested all the CSS), I don’t think it’s really the right direction to go based on the question asked.

We can also use a tag. we have to just remove text-decoration for the button look. something like this.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Javascript change location href and click on a certain button

I would like to redirect the user onclick to a certain page «user/logged_in1» if the user is not already on that page and after the redirect a certain button must be clicked. This button opens a modal. Doesn’t work with this function:

function redirect_to_logged_in_and_open_modal() < if(window.location.href.indexOf("logged_in") >-1) < return >else < location.href="user/logged_in1"; document.getElementsByClassName("zimmerbtn")[0].click(); >> 

It seems it searched already for the button before the redirect happens and therefore the list is empty. How to fix this? EDIT This is a little bit more complex. The modal should only open if the user uses the redirect. If I use onload on the body tag, the modal will always open if the page is loaded, I don’t need that. I need that modal only to be opened if the redirect happens. The whole thing is a Python flask application:

As you see there is a certain trigger for the button to become the redirect button. EDIT Okay working with a cookie sounds like a possible solution. But I cant figure out how to delete the cookie after the button was clicked, none of the proposed code works, eventhough it looks simple:

function redirect_to_logged_in_and_open_modal() < if(window.location.href.indexOf("logged_in") >-1) < return >else < location.href="user/logged_in1"; document.cookie = "redirected_coz_of_click"; >> $( document ).ready(function() < if ($(".logged-in-container")[0]) < var delete_cookie = function(name) < document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; >; if (document.cookie.indexOf('redirected_coz_of_click') > -1 ) < document.getElementsByClassName("zimmerbtn")[0].click(); delete_cookie('redirected_coz_of_click'); console.log(document.cookie); >else < console.log("cookie removed"); >> >); 

Источник