ラジオボタンを押したらすぐにページを飛ばしたい

お世話になっております。

件名の通り
ラジオボタンを押したらすぐにページを飛ばしたい
と思っております。
（submitなど押さずに）

そのようなページはhtmlやphpで作れるのでしょうか？

ググっても見つける事が出来なかったため
上記お問い合わせいたします。

何か情報をお持ちな方はご返答頂けますと嬉しく思います。

申し訳ございません。
説明不足との話なので追記します。

html
1○項目A ○項目B ○項目C
2
3その選択された項目の説明……

上記のようなページを作成しようとしています。

クリック少なくして選べるようにしたかったので
ラジオボタンを押したらすぐにページを飛ばしたいため
質問しました。

jqueryでやるのが良さそうなので調べてみます。

行動規範の内容に同意します

回答7件

HTML
1<form method="POST" action="..." name="form1">
2  <input type="radio" ... onclick="document.form1.submit();">
3</form>

のような感じでいけませんかね。ただ、即時 submit だとラジオボタンである意味がないような気も。

投稿2016/12/08 00:50

tacsheaven

総合スコア13703

tacsheaven

2016/12/08 03:38

項目の説明を表示させたい、なら、onclick で JavaScript を使って、説明の部分にテキストを流し込む、という手も使えるかと思います。 onclick="document.getElementById(説明文表示箇所に付けたID).innerText = '説明文';" のような感じで。説明文を表示する部分を div なり span なりで囲ったうえで ID 振っておけばいいですし。もうちょっとリッチに表示させたければ jQuery でエフェクト掛けるとか（説明文自体を他から取ってくるなら ajax を組み合わせる手もあり）

行動規範の内容に同意します

ラジオボタンを押したらすぐにページを飛ばしたいため

ラジオボタンを使わずに、a要素でリンクにしてしまえば良いのでは？

投稿2016/12/08 02:42

kei344

総合スコア69606

クリックイベントでページ遷移させるのが簡単だと思います。

html
1<html>
2  <script type="text/javascript">
3    function jump() { location.href = "http://www.example.com"; }
4  </script>
5  <input type="radio" onClick="jump()">ページ遷移</input>
6</html>

ラジオボタンでのページ遷移はあんまりお行儀の良いプログラムではないと思いますが…。

【追記】
他の方の回答を拝見すると、SurferOnWwwさんのおっしゃる通り、要件をはっきり書くべきだと思いました。
私は質問の文面を見てクライアントサイドで完結するコードだと早とちりして回答しました…。

投稿2016/12/08 01:03

編集2016/12/09 02:58

carimatics

総合スコア740

PHP のみ考えるのか他のプラットフォーム（ASP.NET とか）も考えるのか、サーバー側の操作に依存せずクライアント側だけで処置するのか、「ページを飛ばしたい」というのは具体的にどうしたいのか（JavaScript で別ベージに遷移すればいいのか、一旦サーバー側で何らかの処置行ってうえでリダイレクトするのか等）などが分かりませんが、どのような場合でも何とかする方法はあると思います。

具体的な話をする必要があれば、具体的に要件を書いてください。

投稿2016/12/08 00:53

退会済みユーザー

総合スコア0

ラジオボタンを押すと説明文をとってきて表示するだけなら
ajaxでバックグラウンドに取りに行って表示すればいいでしょう
ページを遷移するのは非効率だと思います

なおページを遷移するとしてもsubmitボタンnameをつけてボタンを押すだけよいので
javascriptなど無駄につかう必要はありません
ただしボタンに表示されるデータしか送れないのがデメリットです
なおbuttonタグでnameとvalueを指定してもIEはvalueを無視するので
標準化するのは難しいです

PHP
1<form method="post">
2<input type="submit" name="hoge" value="ボタン1"><br>
3<input type="submit" name="hoge" value="ボタン2"><br>
4<input type="submit" name="hoge" value="ボタン3"><br>
5</form>
6<?PHP
7print_r($_POST);
8?>

投稿2016/12/08 03:18

編集2016/12/08 03:20

yambejp

総合スコア116724

jQueryだと以下でできると思います。

html
1<div class="js-example">
2  <label><input type="radio" name="example-radio" value="/page-a/">ページA</label>
3  <label><input type="radio" name="example-radio" value="/page-b/">ページB</label>
4</div>

javascript
1$(function() {
2  $('.js-example').on('change', '[type="radio"]', function() {
3    var path = $(this).val();
4    if(path) {
5      window.location.pathname = path;
6    }
7  });
8});