[javascript] 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.

This question is related to javascript jquery redirect buttonclick

The answer is


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.


You can use:

  location.href = "newpage.html"

in the button's onclick event.


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>

No need for javascript, just wrap it in a link

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

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


With simple Javascript:

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

is this what you mean?

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

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.


Use a link and style it like a button:

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

From YT 2012 code.

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


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


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

This should work ..

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

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>

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to redirect

React-Router External link Laravel 5.4 redirection to custom url after login How to redirect to another page in node.js How to redirect to an external URL in Angular2? How to redirect to a route in laravel 5 by using href tag if I'm not using blade or any template? Use .htaccess to redirect HTTP to HTTPs How to redirect back to form with input - Laravel 5 Using $window or $location to Redirect in AngularJS yii2 redirect in controller action does not work? Python Requests library redirect new url

Examples related to buttonclick

RegisterStartupScript from code behind not working when Update Panel is used How to press/click the button using Selenium if the button does not have the Id? How to launch another aspx web page upon button click? How to make a button redirect to another page using jQuery or just Javascript