プロが教えるわが家の防犯対策術！

select+submit部分をonclikでsubmitしたい

解決済

  • 質問者：arfor
  • 質問日時：
  • 回答数：5件

select+submit部分をonclikでsubmitしたい

不特定数の値をselectにセットし、単一選択させてsubmitしております。

これをアンカーで不特定数を全て表示し、単一選択（当り前か）させて
submitしたいと考えてます。

色々とonclikを検索しているのですが、ピンときません・・・
Aタグ＋onclikで可能なのでしょうか？


元ソースは以下の通りです。
<form action="view.php" method="post">
<table>
<tbody><tr>
<td>カテゴリー：
<br>
<select name="sc">
<option value="">全て</option>
<option value="液晶テレビ">液晶テレビ</option>
<option value="デジタルカメラ">デジタルカメラ</option>
<option value="カメラ・光学機器">カメラ・光学機器</option>
<option value="ブルーレイレコーダー">ブルーレイレコーダー</option>
<option value="晶テレビ">晶テレビ</option>
<option value="ジタルカメラ">ジタルカメラ</option>
<option value="メラ・学機器">メラ・学機器</option>
<option value="ルーレイレコーダー">ルーレイレコーダー</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" class="w80" value="検索">
</td>
</tr>
</tbody></table>
<br>
<input type="hidden" value="あ" name="code_hint">
</form>

通報する

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

質問の本文を隠す

A 回答 (5件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

＞onclikを検索しているのですが、ピンときません


onclickとかは使用しないで、単純に　<a href="view.php?sc=○○">○○</a>　などに置き換えて、リスト表示するとかではダメなのでしょうか？

phpが使える環境みたいなので、javascriptよりもphpで対応したほうが良さそうな気がしますが…

* formのidがないのでforms[0]に、selectもselect[0]と仮定しています。
* form内の他の要素（input hiddenなど）は、サンプルなのでとりあえず無視しています。

<script type="text/javascript">
<!--
var f = document.getElementsByTagName("form")[0];
var select = f.getElementsByTagName("select")[0];
var i, opt = select.options;
var sname = "?" + select.name + "=";
var list, a, ul = document.createElement("ul");
f.parentNode.insertBefore(ul, f);

for (i=0; i<opt.length; i++) {
a = document.createElement("a");
a.appendChild(document.createTextNode(opt[i].text));
a.setAttribute("href", f.action + encodeURI(sname + opt[i].value));
list = document.createElement("li");
list.appendChild(a);
ul.appendChild(list);
}
f.style.display = "none";
//-->
</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

「<a href="view.php?sc=○○">○○</a>」。。

色々な推測、的確な回答。。ありがとうございます。

目から鱗状態です、解決することが出来ました。

まだまだ勉強中ですので、また何かございましたらご指導お願いいたします。

通報する
お礼日時：2010/05/17 13:11

No.5

  • 回答者： steel_gray
  • 回答日時：

#4です。


サンプルに次の一行が抜けてました

<input type="hidden" value="" name="sc">
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： steel_gray
  • 回答日時：

サンプルです。


function sample(O,setFlag){
for(var P=O.parentNode;P.nodeName!='FORM';P=parentNode);
if(!setFlag) P.elements['sc'].value = O.firstChild.nodeValue;
P.submit();
}

<a href="javascript:void(0);" onclick="sample(this,true)">全て</a>
<a href="javascript:void(0);" onclick="sample(this)">液晶テレビ</a>


以下は参考程度に。
検索システムで「全部」も選べるようなシステムなら複数選択も出来た方がいいんじゃないのかな？
検索フォームのmethodはgetの方が使い勝手がいい。
（他の方の回答のように普通にリンクにする事もできるし）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご思案、ご指導ありがとうございます。

おかげさまで無事に解決することが出来ました。

また何かございましたら、ご指南お願いいたします。

通報する
お礼日時：2010/05/17 13:16

No.2

  • 回答者： yyr446
  • 回答日時：

No.1のSelectbox()の中身です。



function Selectbox(e,func){
this.node=e;
this.callback=(function(func){return func;})(func);
this.set=function(target){
while(target.firstChild){target.removeChild(target.firstChild);}
var ul=document.createElement("UL");
for(var i=0;i<e.options.length;i++) {
var li=document.createElement("LI");
var a=document.createElement("a");
a.setAttribute("href","javascript:void(0);");
a.setAttribute("name",e.options[i].value);
a.appendChild(document.createTextNode(e.options[i].text));
a.onclick=(function(func,target){
return function(eve){
var t=eve?eve.target:event.srcElement;
//target.selectedIndex=;
target.value=t.getAttribute("name");
func(t);
}
})(this.callback,this.node);
li.appendChild(a);
ul.appendChild(li);
}
target.appendChild(ul);
}
}
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

こんなのどうでしょうか？


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>SelectBoxObj</title>
<style type="text/css"></style>
</head>
<body>
<div id="result">ここにリストを表示</div>
<form action="view.php" method="post">
<table><tbody><tr><td>カテゴリー：<br>
<select name="sc">
<option value="">全て</option>
<option value="液晶テレビ">液晶テレビ</option>
<option value="デジタルカメラ">デジタルカメラ</option>
<option value="カメラ・光学機器">カメラ・光学機器</option>
<option value="ブルーレイレコーダー">ブルーレイレコーダー</option>
<option value="晶テレビ">晶テレビ</option>
<option value="ジタルカメラ">ジタルカメラ</option>
<option value="メラ・学機器">メラ・学機器</option>
<option value="ルーレイレコーダー">ルーレイレコーダー</option>
</select>
</td></tr>
<tr><td><input type="submit" class="w80" value="検索"></td></tr>
</tbody></table><br><input type="hidden" value="あ" name="code_hint">
</form>
<script type="text/javascript" charset="utf-8">
<!--
my_callback=function(target){
if(window.confirm(target.getAttribute("name")+"を送信します")){
document.getElementsByTagName("form")[0].submit();
}
}
mySelectbox=new Selectbox(document.getElementsByName("sc")[0],my_callback);
mySelectbox.set(document.getElementById("result"));
// -->
</script>
</body>
</html>

Selectbox()の中身は次（字数制限が厳しくなった....）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご思案、ご指導ありがとうございます。

おかげさまで無事に解決することが出来ました。

また何かございましたら、ご指南お願いいたします。

通報する
お礼日時：2010/05/17 13:15

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報