
フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか?
フォームの入れ子はよくないようなので、検索を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も見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#でHTML操作
-
ホームページのアンケート
-
動的にnema属性が変化する場合...
-
一括で値を入力するには?
-
自分のサイト内のワード検索?
-
Document.Writeの使い方を教え...
-
gooぶろぐに
-
javascriptの計算結果を個別に...
-
JavaScript 超初心者です。 Doc...
-
FlashMXについて
-
HTMLのoptionタグ部分に画像を...
-
</form>タグを使用すると強制的...
-
フォーム外からボタン操作をし...
-
フォーム要素以外にもname属性...
-
inputtype=hiddenとは?
-
送信ボタンをエンターで動作さ...
-
スクリプトの作り方って・・・・?
-
画像をボタンのようにフォーカ...
-
リンクをクリックした時にform...
-
プルダウンのリンクについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
同一ページの複数フォームを一...
-
javaScriptで検索結果の保持
-
inputタグのtype値がfileの場合...
-
商品ページのフォームのテキス...
-
親ウィンドウで動的に作成したh...
-
htmlソースの書き換え
-
動的にnema属性が変化する場合...
-
1つのformで複数のactionを実...
-
サイト内検索
-
一括で値を入力するには?
-
テキストエリアの入力値からチ...
-
ジャバスクリプトでカレンダー...
-
同じ名前が複数あるインプット...
-
テキストボックスの初期値について
-
オートコンプリート(自動補完...
-
Document.Writeの使い方を教え...
-
送信フォームのタグですが、ラ...
-
inputタグのclass名にコロン「:...
-
「アドオンを実行しようとして...
-
Json のキーと値の出力の違いに...
おすすめ情報