Q&A
早速のお返事、ありがとうございます。
SPA…まだJQueryも触り始めたばかりなので、調べてみます。
前提・実現したいこと
初めて利用します、不慣れで申し訳ないですが、よろしくお願い致します。
HTMLを加工できる検索プログラムのカスタマイズをしています。
具体的には、ファイル検索プログラムEverythingの表示用HTMLをカスタマイズしています。
Everything
http://www.voidtools.com/support/everything/
日本語ヘルプ
https://sites.google.com/site/everythingjphelp/http
フォーム部分を加工して、URLに検索オプションの情報を追加しているのですが、
チェックボックス、セレクトボックスの内容を、HTML＋Javascryptで持ち回る？引き継ぐ？再現する？ことを
実現したいのですが、うまくできません。。。
よろしくお願いします。
発生している問題・エラーメッセージ
検索ボタンを押して次のページに遷移すると、チェックボックス、セレクトボックスの内容は 元に戻ってしまいます。
該当のソースコード
HTML
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4<meta name="viewport" content="width=512"> 5<title>Files Search</title> 6<link rel="stylesheet" href="/ress.css" type="text/css"> 7<link rel="stylesheet" href="/main.css" type="text/css"> 8<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 9<script src="/jquery.min.js" type="text/javascript"> 10</script> 11<script src="/scripts.js" type="text/javascript"> 12</script> 13</head> 14<body> 15 16～説明文～ 17 18<center> 19 <div class="input-part"> 20 <form class="search-form" name="sf" action="/" method="get"> 21 <input class="normalizebox" style="width:480px" name="search" type="text" title="Search Everything" value="" > 22 <input type="submit" value="検索" /> 23 <br> 24 <input type="checkbox" name="path" value="1" checked="checked">フォルダ名も検索対象 // 表示件数： 25 <select name="count"> 26 <option value="30">30件</option> 27 <option value="50">50件</option> 28 <option value="100">100件</option> 29 <option value="500">500件</option> 30 </select> 31 <br> 32 </form> 33 </div> 34 35～結果表示～ 36 37</center> 38</body>
js
1//チェックボックス選択復帰 2$(function() { 3 get_data = ""; 4 //4は同じnameの選択肢=チェックボックスの数,form name=sf, checkbox name=path 5 for (i=0;i<4;i++) { 6 if (document.sf.path[i].checked) { 7 if (get_data != "") {get_data += " / ";} 8 get_data += document.sf.path[i].value; 9 } 10 } 11 document.sf.path[num].checked = !(document.sf.path[num].checked); 12} 13 14//セレクトボックス選択復帰 15$(function() { 16 document.sf.count[num].selected = true; 17} 18
回答4件
0
自分自身をform送信先に設定すれば、パラメータが付くだけなので、URL() や URL.searchParams でGETパラメータを取り出せば、いいのでは。
Re: Hillbook さん
投稿2018/08/27 05:01
総合スコア18162
0
SPAとしてajaxで処理するという考え方もあります
投稿2018/08/27 04:51
編集2018/08/27 04:52
総合スコア114777
サーバーがなくhttpベースでデータのやり取りができないなら
だめかもしれません
ありがとうございます。
強いて言えば、getメソッドなのでURLから取り出す…はできるのですが。
URLから各要素を分解する方法を調べているところです。
たとえばframeやiframeなどで処理するとかはできないものでしょうか？
フレーム技術を使う限りもとのメニュー的なものは更新されませんので
ありがとうございます。
今回はURLからで実現できました。ありがとうございました！
0
送信するとそれはまた最初のロード状態からとなりますので、もし維持したいのでしたらサーバー側の言語のセッションを使うかlocalStorageを使っては？
投稿2018/08/27 04:48
編集2018/08/27 04:49
総合スコア80850
早速のお返事、ありがとうございます。
WindowsローカルのプログラムにHTML入出力があるだけなので、実質サーバは無い（Exerythingプログラムがサーバ＝作りこみがHTMLとJavaScrypt、クッキーくらいしかできない）ため
localStorageを検索してみます。
回答ではドキュメントへのリンクにしてあるのでそちらも確認してみてください。
ありがとうございます。拝見しています。
ちなみに、sessionStorageでなくlocalなのは理由がありますか？
sessionStorageは確かブラウザを閉じると初期化されたはずなので、半永久的に継続を目的とするためにLocalStorageにしました。
ありがとうございます。逆に、ブラウザ閉じで初期化したい（端末を複数人が利用する）想定なら、sessionStorageでよさそうですね。
別内容の実現の時に利用します。ありがとうございました！
0
自己解決
おかげさまで、できるようになりました。
セレクトボックスのデフォルトが反映されなくなりましたが…それはまた別に追います。
ありがとうございました！
JS
1// ◆定義 2 3// 2.URLからパラメータ取得しHTMLに反映 4var params = (new URL(document.location)).searchParams; 5var path = Boolean(params.get("path")); 6var count = parseInt(params.get("count")); 7 8// ---------------------------------------------------------------------- 9// ◆読み込み時実施 10$(function() { 11 12// 2.パラメータ取得しHTMLに反映 13 //チェックボックス選択復帰 14 document.sf.path.checked = !!(path); 15 //セレクトボックス選択復帰 16 document.sf.count.value = count; 17 18});
投稿2018/08/27 06:29
編集2018/08/27 06:59総合スコア8
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/27 05:07