• ベストアンサー

サブミット後の画面の位置

こんばんは、質問させて下さい。 現在縦に20コくらいセレクトボックスが並ぶ画面を作成しています。 上から順に選択するようになっており、それぞれは連動していてonChangeで自分にサブミットしています。(a.php とすると a.phpへサブミットしている) その際、15コ~20コ辺りのセレクトボックスを変更してサブミットすると画面が上に戻ってしまい、マウスホイールで下に移動しないと対象のセレクトボックスまでたどり着けません。 これではあまりユーザビリティがよくないと思いますので、サブミット後、ある程度サブミット前の画面の位置(15コ~20コ辺り)へ移動できませんでしょうか。 イメージ的には<a href="">と<a name="">みたいな感じを想像しているのですが・・・ ※仕様でセレクトボックスの数を減らすことはできません。 ※仕様でajaxは使わないことになっています。 宜しくお願い致します。

  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

普通にハッシュをつけておけばnameを指定したタグには 飛べそうです。actionで指定すればHTMLだけでいけそうですよ。 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <form method="post" action="hoge.htm#hogeee"> <select name="hogeee"> <option value="1">test1 <option value="2">test2 <option value="3">test3 </select> <input type="submit" value="send"> </form> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

kyouju
質問者

お礼

yambejpさんありがとうございました。 想定している動作になりました!!!!

その他の回答 (1)

  • to_kyo
  • ベストアンサー率41% (7/17)
回答No.1

案1:サブミット後にjavascriptのfocus関数を使って、次のセレクトボックスにfocusする 案2:location.hashで、ページ内リンクへ移動する

参考URL:
http://www.tohoho-web.com/js/form.htm#focus

関連するQ&A

  • プルダウンメニューでサブミット後の画面の位置

    プルダウンメニューでサブミット後の画面の位置についての質問です http://www.calif.cc/pc/item/detail.cgi?brand_code=956&itemCd=0504509 ↑ 上のサイトのように、プルダウンメニューで色を選択し その後サイズを選ぶという流れで作成しているのですが、 プルダウンで選択後に画面が上に戻ってしまいます。 (onChangeで自分にサブミットしています。) 選択後にスクロールしてメニューの位置まで戻る必要性が出てくる為、 ユーザビリティがあまり良くありません。 サブミット後も同じ位置を保持したいのですが 何か良い方法はないでしょうか? ※EC-CUBEでサイト構築をしています ※出来ればJAVAでの実装を望んでいます よろしくお願いします。

  • AJAXでPHPの配列を用いたセレクトボックスの連動

    AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、 PHPで配列をセットしセレクトボックスを生成します。 1番目のセレクトボックスで1番目の項目を選択すると 2番目のセレクトボックスの内容が連動して変化する。 といった動きを目指しています。 2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。 1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。 教えて下さい。

    • ベストアンサー
    • AJAX
  • セレクトしたときに全て初期状態に戻ってしまいます。

    こんにちは。 先日、こちらでご教授いただいた者です。 調べたのですが、その部分についてのいい方法が見つからなかったので、新たに質問させていただきました。 同一ページにテキストフォームと、 3つのセレクトボックスがあり、 その3つのセレクトボックスのうち、2つは連動しますが、残り一つは連動しないようにしたいのですが。 現状は、2つの連動するセレクトボックスを選ぶと 全てが初期状態(未選択の状態)になってしまいます。こちらでご教授いただいた方法を使い、 連動する部分で、onChangeイベントを使っています。 また連動する部分で、一つ目の選択肢を選んだときに、一度mysqlへ問い合わせ、2つ目の項目をmysqlからもってきて表示しています。 連動するセレクトボックスの操作をしたときに 他のテキストフォームや、セレクトボックスが初期状態に戻らないようにするには、どのように改良すればよろしいでしょうか?どうかご教授くださいませ。 よろしくお願いいたします。 WinXP mysql4.0 php4.2 Apache1.3

    • ベストアンサー
    • PHP
  • ちょっとおかしい質問かも、、

    こんにちは。 セレクトボックスについての質問をさせてください。 セレクトボックスで、ある項目を選択し、そのページへ移動させるというものがありますよね。 あれは、JavaScriptを使わなければ出来ないのでしょうか。 JavaScriptを使わずに、htmlだけでHPを作っているのですが、 参考にしようとしたサイトの<select>タグ内の onChange="location.href=this.options[this.selectedIndex].value" の意味がわからなくて、、(^-^;)ヾ なんとかhtmlで、他のページに飛べるようにしたいのですが、、 やっぱり無理なのでしょうか。 おかしな質問だったらごめんなさい。

    • ベストアンサー
    • HTML
  • DBで新規追加したデータがAjaxで反映されない

    いつもお世話になっております。 Apach・PHP・MySQLの構成でWEBアプリを作成しております。 データ表示画面でセレクトボックスを二つ設置して、 一つ目のセレクトボックスを選択した時、OnChangeイベントで Ajaxを利用し選択されたデータのキーに紐づくデータを取得して 二つ目のセレクトボックスに表示するといった処理を作りたいと考えています。 実際にプログラムを組み実装できたのですが、二つ目のセレクトボックスに表示する データを新規登録で追加して、再度一つ目のセレクトボックスを選択して データ表示をおこなっても、追加したはずのデータが表示されません。 ページロードや別画面から再度遷移してきても結果は同じなのですが、 一度ブラウザ(IE6.0)を閉じて再度接続してセレクトボックスを選択すると 追加したデータが表示されます。 以下が該当するAjax部分のソースです。 var Ajax; function CreateAjax(){ try{ Ajax = new ActiveXObject("Msxml2.XMLHTTP"); return Ajax; }catch(e){ Ajax = new ActiveXObject("Microsoft.XMLHTTP"); return Ajax; } } function fncAjax(strURL, strID){ try{ Ajax = CreateAjax(); Ajax.open("GET",strURL); Ajax.onreadystatechange = function(){ if(Ajax.readyState == 4 && Ajax.status == 200){ var obj = document.getElementById(strID); obj.innerHTML = Ajax.responseText; } } Ajax.send(null); }catch(e){ alert(e.description); } } function js_OnSelChange(){ try{ fncAjax("http://hogehoge.com/?key=" + document.form.selectdata.value, "ID"); }catch(e){ alert(e.description); } } どなたか対応策をご存知でしたら、ご教授願いいます。 以上。

  • 複数の連動するセレクトボックスについて。

    こんにちは。 以前もこちらでPHP+mysqlについて質問させていただきました。 今、複数(3つ)の連動するセレクトボックスを作成しているのですが、一つ目と2つ目は正常にDBから値を読み込んできて、各セレクトボックスが連動することが可能となりましたが、3つ目のセレクトボックスの 初期値の値が、2つ目のセレクトボックスの値をDBへ問い合わせて変えない限り、そのまま残ってしまいます。どうすれば3つのセレクトボックスが連動するように解決するのでしょうか?? よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • smarty onchange location

    いつもお世話になっております。 Smartyのセレクトボックスでonchange=ocation.href(aaa.html) を使いたいのですが、どのように記述したら宜しいのでしょうか。 上記の記述では動作してくれません。 お手数ですが、宜しくお願い致します。

    • ベストアンサー
    • PHP
  • javascript php 連携

    よろしくお願いします。 javascriptの『onchange』値をPHPの変数に入れたいと苦戦しています。 <html> <head> <script type="text/javascript"> function hoge1(){ var x = $('str1').options[$('str1').selectedIndex].text; やりたいことはここでPHPの変数『list_a』にjavascriptの変数『x』の値を入れたいです。 } </script> </head> <body> ここに結果表示 <?= $list_a; ?> <select id="str1" name="str1" onchange="hoge1()"> <option>hoge1</option> <option>hoge2</option> <option>hoge3</option> </select> </body> </html> よろしくお願いいたします。 ちなみにAjaxは全くわかりませんのですいません。。。

    • ベストアンサー
    • PHP
  • AJAX+PHPでセレクトボックスの連動

    AJAX+PHPでセレクトボックスの連動をしようとしています。 function SelAjax(){ var x = $('#category1').val(); $.ajax({ type: "POST", url: "category.php", data: {"prm":x}, dataType: "json", success: function(data, status){ $.each(data,function(i) { $('#category2').append($('<option>').attr({ value: i }).text(data[i])); }); }, error: function(XMLHttpRequest, status, errorThrown){ alert("エラーが発生しました!"); } }); } としています。 PHP側で $CATEGORY2 = array( 1 => array( 1 => "a", 2 => "b", 3 => "c", 4 => "d", ), 2 => array( 1 => "e", 2 => "f", 3 => "g", 4 => "h", ), 3 => array( 1 => "i", 2 => "j", 3 => "k", 4 => "l", ), 4 => array( 1 => "m", 2 => "n", 3 => "o", 4 => "p", ), 5 => array( 1 => "q", 2 => "r", ), 6 => array( 1 => "s", 2 => "t", 3 => "u", ), ); $ary = array(); if($_POST["prm"]){ for($i=1;$i<=6;$i++){ if($i ==$_POST["prm"] ) $ary = $CATEGORY2[$i]; } } echo json_encode($ary); としています。 一回目に1番目のセレクトボックスを選択してAjaxでPOSTし2つ目のセレクトボックスを生成できました。 しかし、2回目として1番目のセレクトボックスを選択した際に、1回目にPHPから受け取った配列に積みあがってしまいます。 どのように対処すればいいかわかりません。 教えてください。

    • ベストアンサー
    • AJAX
  • onchange等のイベントハンドラによる同一ページへのPOSTについて

    あるWebページ内のセレクトボックス1,2があるとします。 セレクトボックス1に対して、onchangeイベントハンドラを設けて セレクトボックス1の内容が変更されれば、リロードし 同一ページへセレクトボックス1の内容をPOSTし、 その受け取った内容でセレクトボックス2の内容を 可変したいのですが、具体的にJavascriptからPOST変数への 受け渡し方はどのようになるのでしょうか? WebページはPHPにて構築しています。 すみませんがご存じでしたらどなたか教えてください。

専門家に質問してみよう