Javascript on click redirect

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

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

Источник

How to Redirect from One page to Another in HTML on Button Click?

Let’s say you are designing an e-commerce website. A user lands on the log-in screen and fills in their details. What do you think will happen once the system verifies their credentials? You need to redirect them to their dashboard screen.

Redirect means changing the URL and web page. For example, let’s say you are currently browsing a current page of a website having URL example.com/page-a. Now, let’s say you click a link or button and transfer to another web page of the same website having URL example.com/page-b. This is called redirecting. It is widely used on a website.

Add an Image depicting redirecting in HTML from one page to another. Sample Image

There are several ways in which you can redirect a user:

• The user can initiate redirecting in several ways.
• They can be redirected by clicking on a button or clicking on a link.

In this article, we will explore several ways on who to redirect from one page to another in HTML on a button click.

Redirect using HTML Form Tag

The first way through which you can redirect from one page to another is by clicking a button. You can use a form for this purpose. The form tag in HTML has an attribute action where you can give the URL of the webpage where you want the form button to redirect. The form tag also has another attribute method. Just set the method attribute to POST , which means you are sending the data, and mention the URL in the action attribute. Once you submit the form, it will redirect you to the particular URL and webpage corresponding to that URL.

Syntax:

Code:

Form tags are widely used when you wish to submit user data to the backend, such as during sign-up or log-in.

Redirect using HTML Anchor Tags

If you wish to redirect the user, then you can use the good old anchor tags in HTML. All you need to do is provide the reference or URL of the webpage you need the user to redirect.

Syntax

Code:

Using location.href and location.replace

Apart from using HTML, you can also use Javascript to redirect users to your website. Javascript provides pre-built functions that one can use for redirecting. You can use location.href and location.replace to redirect the user from one page to another.

Syntax

You can add an event listener such as onClick to simulate a button click for redirecting. The location.replace function replaces the current URL with the one you provide, while the location.href creates a link between two pages. This means that once you click on a button that redirects using replace function, you cannot navigate back to the original document using the back button.

Code:

Redirect to Another Page after Form Submit HTML

If you want the user to be redirected after they have submitted their details, then you can use form tags. The attributes of form tags action and method can be used to achieve this. The action attribute specifies the path to which the URL will be redirected once the form is submitted. The method attribute specifies the HTTP method that needs to be used when submitting the form.

After you have filled out the form and clicked submit, then you will be redirected to the dashboard section of the website.

How to Redirect to Another Web Page Using jQuery or JavaScript?

The window.location.href and window.location.replace functions can be used in JQuery as well. You can add an event listener to an element in HTML. Then, you can use the location.href or location.replace method for redirecting.

Code:

In the above code, you have added the event Listener click that will activate when you click on the button. It will activate the function redirectFunction that will use location.href function to redirect to another page.

Conclusion

• Redirecting refers to changing the URL of a website and the webpage associated with it when the user interacts with the website.
• This article explains how to redirect from one page to another in HTML on a button click.
• You can use form tags in HTML for redirecting. The action and method attributes can be used for redirecting to another page.
• Anchor tags can also be used for redirecting. You can specify the URL in the href attribute of anchor tags in HTML.
• Javascript and JQuery also provide support methods for redirecting. You can add event listener functions and call these methods to redirect the user to another page on the website.

Источник

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

Источник

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

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

Источник