フォームでの質問

質問

前にも似たような感じで質問しましたがわかる方ご協力をお願いします。

フォームの機能を使ってURLにページを表示したいのですが
アクションが自動で入ったり/スラッシュなどがエンコードされてしまって思うように結果が導き出せません。
フォームを使ってうまくURLに結果を表示させるにはどうしたらよいでしょうか？
私が作ったフォームの内容を記述します。

<form name="form" method="get" action="http://www.abcdffg.co.jp/">
<p>行の項目はひとづつ選んでね！<br />
例・Aさんをチェック→検索【Aさんのプロフィールを表示】します<br />
　　Bさんをチェック→イラストをチェック【Bさんのイラストを表示】します</p>
<table width="500" border="1">

<tr>
<td>プロフィール</td>
<td>Aさん<input name="a/" type="checkbox" /></td>
<td>Bさん<input name="b/" type="checkbox" /></td>
<td>Cさん<input name="c/" type="checkbox" /></td>
</tr>
<tr>
<td>項目</td>
<td>イラスト<input name="illust" type="checkbox" /></td>
<td>日記<input name="nikki" type="checkbox" /></td>
<td>ペット<input name="pet" type="checkbox" /></td>
</tr>
</table>
<p><input type="submit" value="検索"></p>
</form>

以上
Bさんをチェック→イラストをチェック【Bさんのイラストを表示】
URL的には【http://www.abcdffg.co.jp/b/illust】となるようにしたい。
もしHTMLのフォームだけではこの結果がえられないとするならばCGIなどなにが必要なのかわかる方いたら教えてください。

回答No.6

yoshi_t · ベストアンサー

たびたび申し訳ありません
家に帰ってソースをチェックしてみたらぜんぜん動かない事に気がつきました。
動作確認済みのソースをのせます

<script type="text/javascript">
<!--
function linkFunc(){
var url = getRadioValue("prof") + getRadioValue("kind");
alert(url);
location.href=url;
}

//ラジオボタンの値取得関数
function getRadioValue(str){
var check, con, value;
var el=document.form.elements[str];
num=el.length;
for(i=0;i<num;i++){
check=el[i].checked;
if(check)value=el[i].value;
}
return value;
}
//-->
</script>

<form name="form" method="" action="">
<table width="500" border="1">
<tr>
<td>プロフィール</td>
<td>Aさん<input type="radio" name="prof" value="http://yahoo.jp" /></td>
<td>Bさん<input type="radio" name="prof" value="./b" /></td>
<td>Cさん<input type="radio" name="prof" value="c" /></td>
</tr>
<tr>
<td>項目</td>
<td>イラスト<input type="radio" name="kind" value="/index.html" /></td>
<td>日記<input type="radio" name="kind" value="/nikki.html" /></td>
<td>ペット<input type="radio" name="kind" value="/pet.html" /></td>
</tr>
</table>
<p><input type="button" value="検索" onClick="linkFunc()"></p>
</form>

お礼

お返事が遅くなって申し訳ありません。
フォームリンクの件はおかげさまでうまくいきましたー。
本当に色々とありがとうございました。

回答No.5

yoshi_t

すいません、ちゃんとしていませんでした。
修正します。

<script type="text/javascript">
<!--
function submitFunc(){
var url = document.form.prof.value + document.form.kind.value;
document.form.action = url;
document.form.submit();
}
//-->
</script>

<form name="form" method="get" action="">
<table width="500" border="1">
<tr>
<td>プロフィール</td>
<td>Aさん<input type="radio" name="prof" value="a/" /></td>
<td>Bさん<input type="radio" name="prof" value="b/" /></td>
<td>Cさん<input type="radio" name="prof" value="c/" /></td>
</tr>
<tr>
<td>項目</td>
<td>イラスト<input type="radio" name="kind" value="illust" /></td>
<td>日記<input type="radio" name="kind" value="nikki" /></td>
<td>ペット<input type="radio" name="kind" value="pet" /></td>
</tr>
</table>
<p><input type="button" value="検索" onClick="submitFunc()"></p>
</form>

回答No.4

yoshi_t

すいません、yambejpさんのソースを一部お借りしたので、
ちゃんとしていませんでした。

<script type="text/javascript">
<!--
function submitFunc(){
var url = document.form.prof.value + document.form.kind.value;
document.form.action = url;
document.form.submit();
}
//-->
</script>

<form name="form" method="get" action="">
<table width="500" border="1">
<tr>
<td>プロフィール</td>
<td>Aさん<input type="radio" name="prof" value="a/" /></td>
<td>Bさん<input type="radio" name="prof" value="b/" /></td>
<td>Cさん<input type="radio" name="prof" value="c/" /></td>
</tr>
<tr>
<td>項目</td>
<td>イラスト<input type="radio" name="kind" value="illust" /></td>
<td>日記<input type="radio" name="kind" value="nikki" /></td>
<td>ペット<input type="radio" name="kind" value="pet" /></td>
</tr>
</table>
<p><input type="button" value="検索" onClick="submitFunc()"></p>
</form>

回答No.3

yoshi_t

javascriptでどうでしょう？。

javascriptで各フォーム（プロフィール, 項目）に入力された値を取得し、その組み合わせによって
URLを動的に作成し、formのactionにセットしてからサブミットすれば目的のURLに飛ばす事が出来ます。

<script type="text/javascript">
<!--
function submitFunc(this){
var url = document.this.prof.value + document.this.kind.value;
document.this.action = url;
document.this.submit();
}
//-->
</script>

<form name="form" method="get" action="" onSubmit()="return submitFunc(this)">
<table width="500" border="1">
<tr>
<td>プロフィール</td>
<td>Aさん<input type="radio" name="prof" value="a/" /></td>
<td>Bさん<input type="radio" name="prof" value="b/" /></td>
<td>Cさん<input type="radio" name="prof" value="c/" /></td>
</tr>
<tr>
<td>項目</td>
<td>イラスト<input type="radio" name="kind" value="illust" /></td>
<td>日記<input type="radio" name="kind" value="nikki" /></td>
<td>ペット<input type="radio" name="kind" value="pet" /></td>
</tr>
</table>
<p><input type="button" value="検索" onClick="return submitFunc(this)"></p>
</form>

上記スクリプトは実際に動かしていないので、コピペで動くか分かりませんが、
こんな感じでよろしいでしょうか？

javascriptが使えれば、ある程度の事は可能だと思います。

回答No.2

yambejp

PHPやCGIで対応する方がよろしいかと思いますが、環境が許すのであれば
javascriptでもできます。以下参考までに

<script language="javascript">
function submitFunc(f){
flg=false;
action=f.action;
for (var i=0;i<f.length;i++){
if(f[i].name=="prof" && f[i].checked){
action+=f[i].value;
flg=true;
}
}
if(!flg){
alert("メンバーを選択してください")
return false;
}
flg=false;
for (var i=0;i<f.length;i++){
if(f[i].name=="kind" && f[i].checked){
action+=f[i].value
flg=true;
}
}
if(!flg){
alert("項目を選択してください")
return false;
}
location.href=action
return false;
}
</script>

<form name="form" method="get" action="http://www.abcdffg.co.jp/" onSubmit()="return submitFunc(this)">
<table width="500" border="1">
<tr>
<td>プロフィール</td>
<td>Aさん<input type="radio" name="prof" value="a/" /></td>
<td>Bさん<input type="radio" name="prof" value="b/" /></td>
<td>Cさん<input type="radio" name="prof" value="c/" /></td>
</tr>
<tr>
<td>項目</td>
<td>イラスト<input type="radio" name="kind" value="illust" /></td>
<td>日記<input type="radio" name="kind" value="nikki" /></td>
<td>ペット<input type="radio" name="kind" value="pet" /></td>
</tr>
</table>
<p><input type="submit" value="検索"></p>
</form>

※チェックボックスはデータが競合するのでやめた方がよろしいかと
おもいラジオボタンにしておきました。

お礼

説明と解答ありがとうございます。
ラジオボタンのほうが確かに良いですね・・・(*'ワ'*)/

javaでもできるんですね・・・。ちょっと試しにやってみたのですが
Aさんプロフィールを押すとURLの後ろに【?prof=a%2F】と出てしまいます。私の環境が悪いのでしょうか？
結果としてはURLの後ろに【a/】のみが出ればOKなのですが・・・。

回答No.1

calltella

上記のHTMLについて説明します。
これだと「a/」「b/」「c/」「illust」「nikki」「pet」
の内容を検索ボタンを押すことによってhttp://www.abcdffg.co.jp/に対して送信しなさいと言う事になります。
ですが、http://www.abcdffg.co.jp/はそんなものは受け付けられませんのでエラー表示されます。
内容の受け取れるCGIやPHPなどの内容の受取れるページに対して送信しなければいけませんし
内容の受取れるプログラムをネット上に置く場所も必要です。
自分の使用しているプロパイダなりWEBスペースがCGIが使用できるのか使用できないのか確認してみてください。

お礼

解答ありがとうございます。
urlの例は例題として書いたのですが、やはりCGIなどが必要のようですね・・・。
解答はまだまだ募集しています。
結果が得られるようなCGI知っている方がいたら教えてください。