【お題】NEW演歌

フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか?
フォームの入れ子はよくないようなので、検索をJava scriptでできればよいのですが・・・
スタイルシートではデザイン上無理でした。

<form id="fm" name="fm" action="URL" method="POST">
<input type="hidden" name="shouhinmei" value="商品名">
<input type="hidden" name="kakaku" value="500">
<input type="image" src="kounyuu.gif value="購入">

<form method=get action="http://www.google.co.jp/search">
<input type=hidden class="q" name=q value="商品名"><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=hl value="ja"><input name=btnG type="image" src="検索.gif value="検索"><input type=hidden name=sitesearch value="サイトのURL"></form>
</form>
</form>

+----+  +----+
|購入|  |検索|
+----+  +----+

A 回答 (4件)

では、以下のような感じで。


なるべく多くのブラウザで動くように書いたつもりですが検証は充分行ってください。

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function searchGoogle(q) {
document.forms['searchForm'].elements['q'].value=q;
document.forms['searchForm'].submit();
return false;
}
//-->
</script>

</head>
<body>

<form action="URL">
~~
<input type="image" src="kounyuu.gif value="購入">
<a href="http://www.google.co.jp/" onclick="return searchGoogle('商品名')"><img src="検索.gif" border=0></a>
</form>

<form action="http://www.google.co.jp/search" id="searchForm" style="display:none;">
<input type=hidden name="q">
<input type=hidden name=ie value="UTF-8">
<input type=hidden name=oe value="UTF-8">
<input type=hidden name=hl value="ja">
<input type=hidden name=sitesearch value="サイトのURL">
</form>

</body>
</html>
    • good
    • 1
この回答へのお礼

steel_grayさん。お返事遅くなってすみません。
教えていただいた内容で希望通りのものができあがりました。
本当にありがとうございます。
document.form.submitを使って試行錯誤していましたが、<script>内がうまく書けませんでした。
なるほどここはこうやって書くのですね。
formもスタイルシートのdisplay:none;で見えなくするという発想も驚きでした。
まだまだ勉強することが多そうです。
なるべく自力で解決するよう頑張りますが、行き詰ったときにはまた教えていただければ幸いです。

お礼日時:2005/09/26 22:17

> スタイルシートでは無理でした。


ということですが無理ではないと思います。
もう一度挑戦してみては?

以下は一例ですが他にもやりようはあると思います。

<form action="URL">
<input type="submit" value="購入" style="float:left;">
</form>
<form action="URL" style="display:inline;">
<input type="submit" value="検索">
</form>

この回答への補足

steel_grayさん、いつも回答いただきありがとうございます。
確かにボタンだけならfloatを使うことができますね。
しかし今回はデザインの都合上、購入ボタンのあるformは大きなボックスとなってボタンを包んでいるのです。

検索ボタンをtop: -25px; left: 150px; のようにしたりもしましたが、IE6でブラウザ上は問題なく見えるもののDreamweaverのプレビューで大きく崩れてしまうのです。

PCに不慣れなクライアントがDreamweaverで更新作業させますのでこれだと作業場所と見栄えが一致せず支障があります。

できればフォームの中に入れてしまいたいのです。
何かよい解決方法がありましたら教えてください。

補足日時:2005/09/25 19:24
    • good
    • 0

一旦他のページに飛ばして、そこで分岐させてはどうでしょう?


以前PHP(+Java Script)でそういう構造のを書きましたが、飛ばした後の分岐はCGIやJAVAでも可能でしょう。飛ばす先は他のページではなく自ページでも良いです。

この回答への補足

yambejpさん、早速の回答ありがとうございます。
分岐のコードを製作するのはJava Script初心者の私にとっては質問の内容と同じかそれ以上に難しく感じられます。

いろいろ検索してみたところ、document.form.actionかdocument.form.submitでできそうな気がします。もう少し調べてみます。

補足日時:2005/09/25 18:05
    • good
    • 0

formにidを振って、actionを書きかえればできる


とは思いますが、極端なクライアント依存で、
あまりお勧めできません。

例えば、検索と購入をラジオボタンで選ばせて
submitは「実行」とするとか、
検索をおすとhiddenに指定されたsearchという
項目にtrueをいれるとか、そういうパラメータで
受け取ったaction側が判断するのがあるべき
フォームの使いか方かとおもいます。

この回答への補足

yambejpさん、早速の回答ありがとうございます。
せっかく教えていただいたのですが、内容が高度過ぎて残念ながら半分程度しか理解できませんでした。

>例えば、検索と購入をラジオボタンで選ばせて
>submitは「実行」とするとか、

これは購入するにも検索するにもユーザが2度クリック(ラジオボタンと実行ボタン)しなければならず、不親切ではありませんか?
フォームの使い方としては正しいのでしょうが・・・

補足日時:2005/09/25 17:16
    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています


おすすめ情報