フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか?
フォームの入れ子はよくないようなので、検索を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>
+----+ +----+
|購入| |検索|
+----+ +----+
No.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>
steel_grayさん。お返事遅くなってすみません。
教えていただいた内容で希望通りのものができあがりました。
本当にありがとうございます。
document.form.submitを使って試行錯誤していましたが、<script>内がうまく書けませんでした。
なるほどここはこうやって書くのですね。
formもスタイルシートのdisplay:none;で見えなくするという発想も驚きでした。
まだまだ勉強することが多そうです。
なるべく自力で解決するよう頑張りますが、行き詰ったときにはまた教えていただければ幸いです。
No.3
- 回答日時:
> スタイルシートでは無理でした。
ということですが無理ではないと思います。
もう一度挑戦してみては?
以下は一例ですが他にもやりようはあると思います。
<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で更新作業させますのでこれだと作業場所と見栄えが一致せず支障があります。
できればフォームの中に入れてしまいたいのです。
何かよい解決方法がありましたら教えてください。
No.2
- 回答日時:
一旦他のページに飛ばして、そこで分岐させてはどうでしょう?
以前PHP(+Java Script)でそういう構造のを書きましたが、飛ばした後の分岐はCGIやJAVAでも可能でしょう。飛ばす先は他のページではなく自ページでも良いです。
この回答への補足
yambejpさん、早速の回答ありがとうございます。
分岐のコードを製作するのはJava Script初心者の私にとっては質問の内容と同じかそれ以上に難しく感じられます。
いろいろ検索してみたところ、document.form.actionかdocument.form.submitでできそうな気がします。もう少し調べてみます。
No.1
- 回答日時:
formにidを振って、actionを書きかえればできる
とは思いますが、極端なクライアント依存で、
あまりお勧めできません。
例えば、検索と購入をラジオボタンで選ばせて
submitは「実行」とするとか、
検索をおすとhiddenに指定されたsearchという
項目にtrueをいれるとか、そういうパラメータで
受け取ったaction側が判断するのがあるべき
フォームの使いか方かとおもいます。
この回答への補足
yambejpさん、早速の回答ありがとうございます。
せっかく教えていただいたのですが、内容が高度過ぎて残念ながら半分程度しか理解できませんでした。
>例えば、検索と購入をラジオボタンで選ばせて
>submitは「実行」とするとか、
これは購入するにも検索するにもユーザが2度クリック(ラジオボタンと実行ボタン)しなければならず、不親切ではありませんか?
フォームの使い方としては正しいのでしょうが・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
form actionで二つ送信先を指定する方法を教えて下さい。
PHP
-
1つのformで複数のactionをボタン1つで
JavaScript
-
-
4
リクエストに応じたselectedの初期値設定方法
Java
-
5
1つのフォーム内容を1つのsubmitで複数ページに同時送信
JavaScript
-
6
Java-jspの画面入力値保持について
Java
-
7
JSPからServletへの遷移
Java
-
8
JSPで<SELECT>の中にDBから持ってきたデータを反映させたい
Java
-
9
プルダウンメニューにDBの内容を表示させる
PHP
-
10
1つのform内に2つのsubmitボタンがあり、action属性がそれぞれで異なる場合
JavaScript
-
11
複数のフォームを一括で送信することは可能ですか?
HTML・CSS
-
12
プルダウンで選択すると、DBの値を取得したい
JavaScript
-
13
Javascriptの値をJava(JSP)へ渡す方法
Java
-
14
getParameterで値が取得できず、困ってます
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「アドオンを実行しようとして...
-
1つのformで複数のactionを実...
-
一括で値を入力するには?
-
type="hidden"を使って時刻を送信
-
<a href=**?***=***>をGET方式で
-
GETをPOSTに変更したところ 送...
-
入力フォームの javascript で ...
-
IE6とIE8のSELECTタグの11と31
-
submitの処理の後別の画面を表...
-
checkboxを「変更不可」にでき...
-
同じnameのhiddenで別々の内容...
-
input date について
-
formタグのactionパラメータで...
-
リストボックス全選択について
-
CGIを使わず、HTMLだけで作るメ...
-
リンクをクリックした時にform...
-
フォーム外からボタン操作をし...
-
親ページからインラインフレー...
-
URL パラメータを使ってフォー...
-
htmlのobjectタグで埋め込んだ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1つのformで複数のactionを実...
-
javaScriptで検索結果の保持
-
親ウィンドウで動的に作成したh...
-
同じ名前が複数あるインプット...
-
一括で値を入力するには?
-
オートコンプリート(自動補完...
-
javasqliptで複数のテキストボ...
-
同一ページの複数フォームを一...
-
htmlのcheckboxのデータをcgiフ...
-
フォームのValue値
-
google検索窓でセレクトメニュ...
-
テキストエリアの入力値からチ...
-
「アドオンを実行しようとして...
-
今日の日付をセットしたいのですが
-
CGIが使えない状態でのFORMコマ...
-
inputタグのclass名にコロン「:...
-
Json のキーと値の出力の違いに...
-
フォームのテキストボックス内...
-
ジャバスクリプトでカレンダー...
-
Googleのサイト内検索機能の貼...
おすすめ情報