重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

おしえて

プルダウンと入力を両方行う検索窓を作りたい

解決済

  • 質問者：うぇざー
  • 質問日時：
  • 回答数：3件

この質問をみつけてくださった方々、ありがとうございます。
さっそく質問内容に入らせていただきます。
プルダウンで選択を必須にし、その内容と、入力式の検索窓に入力された単語を、検索ボタンが押された際合わせて参照して、その結果に応じてサイト内のページに移動するということがやりたくて、いろいろと調べたのですが、同じことをしようとしている例をみつけることができなかったので、質問させていただきました。
調べた結果、選択必須のプルダウンの設置と、自由入力可能な検索窓と検索ボタンの設置はできましたが、それをどう結びつけて、検索窓のactionの部分にどう書き込めばよいのかというところでつまづいてしまいました。
まとめると、
プルダウンで一つを必ず選択→入力フォームに検索したい単語を入力→検索ボタンを押す→プルダウンの選択肢+入力された語句を元に、サイト内の別のページに直接移動させる
といった感じです。
何卒ご教授よろしくお願いいたします。

質問者からの補足コメント

  • 質問内容に書き忘れていたことがありましたので付け加えさせていただきます。
    もし、検索内容に不備（プルダウンが選択されていない、打ちこまれた単語がこちらの用意しているデータにない）場合は、検索窓の下に「検索結果がみつかりません」などの文章を出したいです。

      補足日時：2018/02/11 15:49
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

参考程度に

No.3ベストアンサー

ANO.1/2です。



ご提示いただいた内容は、文法の間違い等が多いので、サンプルを以下に示します。
4つのhtmlを作成したら、test.htmlをダブルクリックして動作を確認してみて下さい。
※日本語でも大丈夫だと思いますが、文字化けを避けるため全て英語にしています。

1. 作成するhtml
test.html （条件入力ページ）
result1.html（Selection1選択、かつテキスト文字が「PPP」の時の出力ページ）
result2.html（Selection2選択、かつテキスト文字が「QQQ」の時の出力ページ）
result3.html（Selection3選択、かつテキスト文字が「RRR」の時の出力ページ）
※すべて同じフォルダに置いて下さい。

2. 各htmlの中身
[test.html]
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
function linkCheck(){
var A = Test_form.sel.value;
A = parseInt(A);
var B = Test_form.txt.value;
if(A == 1 && B == "PPP") {
location.replace('./result1.html');
} else if(A == 2 && B == "QQQ") {
location.replace('./result2.html');
} else if(A == 3 && B == "RRR") {
location.replace('./result3.html');
} else {
alert("No found!");
}
}
</script>
</head>
<body>
<form name="Test_form" action="test.html">
<fieldset>
<select name="sel" required>
<option value="" >Select please</option>
<option value="1">Selection1</option>
<option value="2">Selection2</option>
<option value="3">Selection3</option>
</select>
<div>
<input type="text" name="txt" />
<input type="button" value="Search" onclick="linkCheck()" />
</div>
</fieldset>
</form>
</body>
</html>


[result1.html]
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Result1</title>
</head>
<body>
This is result1 page!!<br />
<a href="./test.html">Back</a>
</body>
</html>


[result2.html]
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Result2</title>
</head>
<body>
This is result2 page!!<br />
<a href="./test.html">Back</a>
</body>
</html>


[result3.html]
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Result3</title>
</head>
<body>
This is result3 page!!<br />
<a href="./test.html">Back</a>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！ご教授いただいたご回答で思い通りの動作をしました！
varにformそのものを書いてよかったのですね！
自分で書いたものとご回答を比べてみると、「'」で囲うべきところを「"」で囲っていたり、リンク先の手前に「./」がついていなかったりと細かい表記のルールがまだまだ理解できていないことがよくわかりました。
今回アドバイスをいただいたり、いろいろ調べたおかげで勉強になりました！
もっと精進したいと思います！

通報する
お礼日時：2018/02/22 19:40

No.2

ANo.1です。



CSSはhtmlの装飾に使用するもので、プログラミング言語ではありません。
セレクタを使用してif文ぽいものは書けなくはないですが、ご質問の内容を実現させるのには適切ではありません。

JavaScript+JQuery(JavaScriptより扱いやすくしたファイル)が一番手軽だと思います。
参考として、以下のサイトを示します。

[JavaScriptとは]
https://www.sejuku.net/blog/3984

[JQueryとは]
https://webkikaku.co.jp/blog/webdesign/jquery_st …

[JavaScript+JQueryを使用した問い合わせフォームの入力チェックとエラーメッセージ表示]
http://migo-media.com/contact-errorcheck/
※サンプル付きです。

[JavaScriptでの条件分岐や繰り返し処理等の文法一覧]
http://cya.sakura.ne.jp/js/statement.htm
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご説明とURLありがとうございます！
発想を「検索窓」から「プルダウンとテキストボックスの内容によって条件分岐して指定したページに飛ばしてくれるフォーム」に切り替えて、貼っていただいたURLの内容を参照しながら、自分で調べたことを組み合わせて書いてみました。
ですが、動作しませんでした。
まだ何か解釈を間違えたり、書き方を間違えたりしているのでしょうか？

<form>
<fieldset>
<select name="example" required>
<option value="" name="A">選択してください</option>
<option value="1" name="A">選択１</option>
<option value="2" name="A">選択２</option>
<option value="3" name="A">選択３</option>
</select>
<form method="get" action="linkCheck()" class="search">
<div>
<input type="text" name="B" class="textBox"><input type="submit" value="検索" class="btn">
</div>
</fieldset>
</form>
</form>
<script type="text/javascript">
function linkCheck(){
if((A==1||A==3&&B=="入力された単語１"||B=="入力された単語2"){
location.replace("○○.html");
}else if((A==2&&B=="入力された単語3"){
location.replace("△△.html");
}else if((A==""||B==""){
document.write="検索結果がみつかりません。";
}

通報する
お礼日時：2018/02/20 16:38

No.1

以下の処理ではいかがでしょうか。



(1) プルダウン項目がNULLまたは""（空文字）であれば、「検索結果が見つかりません」
(2) プルダウン項目の情報がある場合、入力欄の単語とデータを比較し、一致する単語がなければ「検索結果が見つかりません」
(3) 一致する単語があれば、該当のページに移動。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます！
そのご回答をいただいてから、そう書けばその処理が実現できるのかいろいろ調べて考えたのですが、
CSSを書くところでvarで格納した変数をいくつか用意して、if文で条件分岐させるというやり方になるのでしょうか？
書き方としては
varA=[選択肢１,選択肢2,選択肢３];

if(A[0]+入力された単語a){
document.write('○○.html');}
if(A[1]+入力された単語b){
document.write('△△.html');}
else{
document.write("検索結果が見つかりません");
}
といった感じでよろしいのでしょうか？
まだ独学で始めたばかりなもので、見当違いでしたら申し訳ないです。

通報する
お礼日時：2018/02/15 05:28

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報