web-dev-qa-db-ja.com

jQueryまたは単にJavaScriptを使用してボタンを別のページにリダイレクトする方法

プロトタイプを作成していますが、検索ボタンをサンプルの検索結果ページにリンクさせたいです。

JQueryを使用してクリックされたときに、ボタンを別のページにリダイレクトするにはどうすればよいですか。

javascriptjqueryredirectbuttonclick
89
Ankur

スクリプトなし：

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

さらに良いことに、あなたはただどこかに行くので、「どこかに行く」ための標準インターフェースをユーザーに提示します。

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

ただし、コンテキストは「ユーザーがフォームを送信する通常の検索をシミュレートする」ように聞こえますが、その場合、最初のオプションは進むべき方法です。

60
Quentin

これはどういう意味ですか？

$('button selector').click(function(){
   window.location.href='the_link_to_go_to.html';
})
182
Reigel
$('#someButton').click(function() {
    window.location.href = '/some/new/page';
    return false;
});
69
Darin Dimitrov

単純なJavascriptの場合：

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

HTMLで、ボタンにデータ属性を追加できます。

<button type="submit" class="mybtn" data-target="/search.html">Search</button>

次に、jQueryを使用してURLを変更できます。

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

お役に立てれば

18
g-francesca

次を使用できます。

  location.href = "newpage.html"

ボタンのonclickイベントで。

9
Vincent Ramdhanie

これは動作するはずです..

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

JavaScriptを必要とせず、リンクにラップするだけです

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

Window.locationを使用できます

window.location="/newpage.php";

または、検索ボタンが存在するフォームに、目的のページのアクションを持たせることができます。

6
PetersenDidIt

この単純なJavaScriptコードを使用して、サンプルの検索結果ページにリンクする検索ボタンを作成できます。ここで、ホームページの '/ search'にリダイレクトしました。Google検索エンジンから検索する場合は、 " https://www.google.com/search "フォームアクションで。

<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>
2
shuseel

リンクを使用して、ボタンのようにスタイルを設定します。

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

ここには、クライアント側のリダイレクトについて多くの質問がありますが、それらのほとんどについて説明することはできません...これは例外です。

リダイレクトはクライアントから来ることを想定していません…サーバーから来ることになっています。サーバーを制御できない場合は、Javascriptを使用して別のURLを選択して移動できますが、それはリダイレクトではありません。リダイレクトは、サーバーで300個のステータスコードを使用するか、HTMLでMETAタグを使用して行われます。

0
Michael Blake

そして、控えめなJavaScript（UJS）を使用したCoffeeScriptを使用したRails 3では：

assets/javascripts/my_controller.js.coffeeに追加：

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

読み取り：document.readyイベントが発生したら、onclickイベントをIDがfield_nameであるDOMオブジェクトに追加し、javascriptを実行しますwindow.location.href='new_url';

0
Tom Harrison

これはそれを行う方法です、Owens worksしかし、それは合法なHTMLではありません、技術的にはこの答えはjQueryではありません本当にis jQueryのようなものはとにかくありません）

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