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

JavascriptJqueryRedirectButtonclick

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

is this what you mean?

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

Solution 2 - Javascript

$('#someButton').click(function() {
    window.location.href = '/some/new/page';
    return false;
});

Solution 3 - Javascript

Without script:

<form action="where-you-want-to-go"><input type="submit"></form>

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

<a href="where-you-want-to-go">ta da</a>

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.

Solution 4 - Javascript

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

<button type="submit" class="mybtn" data-target="/search.html">Search</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);
});

Hope this helps

Solution 5 - Javascript

With simple Javascript:

<input type="button" onclick="window.location = 'path-here';">

Solution 6 - Javascript

You can use:

  location.href = "newpage.html"

in the button's onclick event.

Solution 7 - Javascript

No need for javascript, just wrap it in a link

<a href="http://www.google.com"><button type="button">button</button></a>

Solution 8 - Javascript

This should work ..

$('#buttonID').click(function(){ window.location = 'new url'});

Solution 9 - Javascript

You can use window.location

window.location="/newpage.php";

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

Solution 10 - Javascript

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)

 <button onclick="window.location.href='http://www.google.com';">Google</button>

Solution 11 - Javascript

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.

<form action="/search"> Enter your search text: 
<input type="text" id="searchtext" name="q"> &nbsp;
<input onclick="myFunction()" type="submit" value="Search It" />
</form> 
<script> function myFunction() 
{ 
var search = document.getElementById("searchtext").value; 
window.location = '/search?q='+search; 
} 
</script>

Solution 12 - Javascript

From YT 2012 code.

<button href="/signin" onclick=";window.location.href=this.getAttribute('href');return false;">Sign In</button>

Solution 13 - Javascript

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

Solution 14 - Javascript

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.

Solution 15 - Javascript

Use a link and style it like a button:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnkurView Question on Stackoverflow
Solution 1 - JavascriptReigelView Answer on Stackoverflow
Solution 2 - JavascriptDarin DimitrovView Answer on Stackoverflow
Solution 3 - JavascriptQuentinView Answer on Stackoverflow
Solution 4 - Javascriptg-francescaView Answer on Stackoverflow
Solution 5 - JavascriptSarfrazView Answer on Stackoverflow
Solution 6 - JavascriptVincent RamdhanieView Answer on Stackoverflow
Solution 7 - JavascriptOwenView Answer on Stackoverflow
Solution 8 - JavascriptGabriele PetrioliView Answer on Stackoverflow
Solution 9 - JavascriptPetersenDidItView Answer on Stackoverflow
Solution 10 - JavascriptMr HeelisView Answer on Stackoverflow
Solution 11 - JavascriptshuseelView Answer on Stackoverflow
Solution 12 - JavascriptDIESView Answer on Stackoverflow
Solution 13 - JavascriptTom HarrisonView Answer on Stackoverflow
Solution 14 - JavascriptMichael BlakeView Answer on Stackoverflow
Solution 15 - JavascriptRedwolfView Answer on Stackoverflow