3つのフォームを作成し、トップからのリンク先を指定フォームに切り替えたい
- JavaScript初心者です。3つのフォームを作成し、トップからのリンク先を指定フォームに切り替えたいと考えています。
- サブpageで各フォームを一つのhtmlにまとめたいため、iframeもしくはinnerHTMLを使用してフォームを切り替えたいと考えています。
- 特定の条件に応じて、メール相談画像ボタンからのリンク先をお問い合わせフォームに、診察予約ボタンからのリンク先を予約フォームに切り替えたいです。
- ベストアンサー
フォームを３つつくり、トップからの<img>リンクの時は指定フォームにリンクしたい。
JavaScript初心者です。 サブpage（診察予約のリンク先のhtml）で各フォーム（お問い合わせ・予約・ゲストブックなどを）を一つのhtmlにまとめたく、iframeもしくはinnerHTMLを使い、サブメニューでdisplay="none"切り替えなどで、各フォームを切り替えたいと作成し始めたものです。 サーバーサイドのＣＧＩはKentさんのフリーＣＧＩのＣｌｉｐＭａｉｌやAjaxを使用する予定でおります。 ただ条件として、トップのコンテンツ内の「メール相談画像」ボタンからのリンク先はお問い合わせフォームで、通常の横メニューボタン（緑の）の診察予約ボタンからのリンク先は予約フォームがデフォルトとして表示されるようにしたいわけです。 【ご参照お願いします。】 http://miya-fc-2008.sakura.ne.jp/ たぶんjavascriptで条件式を用いてリンク先を振り分ければいいと思ったので、質問投稿させて頂きましたが、具体的にどういう条件式などで 書いていけばいいか分かりません。 アドバイス頂けると幸いです。 宜しくお願いします。
- WebRunva
- お礼率80% (34/42)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
どこまでの初心者かわからないのですが 理解できなかったらごめんなさい・・・ １．まず、リンクを以下のように書き換えます。 <a href="form.html?mail">←メール用リンク <a href="form.html?appoint">←予約用リンク ※「?」以降の文字列やファイル名は適当に変えちゃってください ２．form.html（仮）のスクリプト部に以下を追加（外部ファイルでも可） //ここから document.body.onload=function(){//読み込みが終われば判定開始 if(location.search=="?mail"){//ファイル名の後に「?mail」が付いていれば document.getElementById('mail').style.display="block";//「mail」フォームを表示 } else if(location.search=="?appoint"){//「?appoint」ならば document.getElementById('appoint').style.display="block"; } else{//それ以外・指示なしのときは document.getElementById('default').style.display="block"; } } //ここまで ３．HTMLのフォーム部は以下のようにします <form id="mail" style="display:none;">メールフォーム</form> <form id="appoint" style="display:none;">予約用フォーム</form> <form id="default" style="display:none;">その他フォーム</form> これでなんとなくいけるはずです・・・
その他の回答 (2)
- 15mm
- ベストアンサー率65% (65/100)
だいぶ遅くなってしまいました。すみません。 方法は２つほど考えて参りました。 １．<noscript><form></noscript>のようにもうひとつ標準表示のフォームを「display:none;」を削除して配置する。 JS非対応・無効ブラウザではフォームの切り替えもできないわけですから、 他２つのファームも別ファイルで作成・リンクするしか切り替えの方法はないようです ２．<noscript><style></noscript>で非対応・無効ブラウザでのみのスタイル指定。 この方法では、正常に動作はしても文法的に問題があるのでお勧めできません＾＾； （<noscript>は<body>内、<style>は<head>内に配置するものですので・・・） ↓でも一応やり方を↓ <noscript><style type="text/css"><!-- #default{display:block !important;} --></style></noscript> 配置する場所は・・・どこでもいいです。どうせ文法無視したやり方なので。 （外部ファイルにして<link>でもいいです） 文章書いていて改めて思ったのですが、やっぱり１のほうがいいですかね
補足
15mm様> JS非対応・無効時の方法、教えて頂きありがとうございました。 やはり#1の方法が正規で安全そうなので、さっそく試してみますね！ 根気よく丁寧に教えて頂き、本当に分かりやすく感謝しております。 重ねてありがとうございました。
- 15mm
- ベストアンサー率65% (65/100)
>＃１の回答への補足 遅くなってすみません。 補足の内容のとおりでＯＫです。 私の勝手な解釈と実際にやりたいことが少しでも違えばまたご注文ください。 ちなみに＃１の内容にはJavaScript無効・非対応ブラウザへの配慮は全く入れなかったのですが、 対処法は別に用意してあるのでしょうか？ もし無いのであれば、＃１に少し付け足さないと フォームが何も表示されないという苦情が出かねません そちらのほうも必要ならば言ってください。
補足
15mm様> ご回答頂き、本当にありがとうございます。 私は今まで、Jsの無効・非対応ブラウザへの配慮はまったく視野に 入れてなかったのですが、やはりフォームはに非表示になってしまうとさすがに痛いので、是非この機会に＃１に関してで教えて頂けると、 幸いです。 またお時間が許される時に、宜しくお願いします。
関連するQ&A
- ※再質問です。 フォームを３つつくり、トップからの<img>リンクの時は指定フォームにリンクしたい。
※この質問は以前こちらで質問させて頂いた内容と同じですが、 どうしてもうまくいかなかったため、再度質問させて頂きました。 js初心者です。 サブpage（診察予約のリンク先のhtml）で各フォーム（お問い合わせ・予約・ゲストブックなどを）を一つのhtmlにまとめたく、iframeもしくはinnerHTMLを使い、サブメニューでdisplay="none"切り替えなどで、各フォームを切り替えたいと作成し始めたものです。 サーバーサイドのＣＧＩはKentさんのフリーＣＧＩのＣｌｉｐＭａｉｌやAjaxを使用する予定でおります。 ただ条件として、トップのコンテンツ内の「メール相談画像」ボタンからのリンク先はお問い合わせフォームで、通常の横メニューボタン（緑の）の診察予約ボタンからのリンク先は予約フォームがデフォルトとして表示されるようにしたいわけです 。 http://miya-fc-2008.sakura.ne.jp/（ご参考に拝見して頂きたいＵＲＬです。） 【フォームの外部jsファイル】 //トップからのリンク時の振り分け（予約フォームかお問合わせフォームかで） document.body.onload=function(){//読み込みが終われば判定開始 alert('function直後OK'); if(location.search=="?mail_s"){//ファイル名の後に「?mail」が付いていれば document.getElementById('mail_s').style.display="block"; document.getElementById('f1_title').style.background = 'url(images/sin_yoyaku/toiawase_form_title.gif)'; alert('if処理一回目OK');//「mail」フォームを表示 } else if(location.search=="?apo_s"){//「?appoint」ならば document.getElementById('apo_s').style.display="block"; document.getElementById('f1_title').style.background = 'url(images/sin_yoyaku/yoyaku_form_title.gif)'; alert('if処理二回目OK'); } else{//それ以外・指示なしのときは document.getElementById('apo_s').style.display="block"; document.getElementById('f1_title').style.background = 'url(images/sin_yoyaku/yoyaku_form_title.gif)'; } } ※js側でalertをおいて、デバッグをしぼってみたら、どうやらbody.onloadを読み込んでないようです。この箇所は以前の回答者 の方に教えて頂いた箇所で、自分でどう修正したらよいか分かりません。 アドバイス宜しくお願いします。
- ベストアンサー
- JavaScript
- リンクを押すとフォームを送信
リンクを押すとフォームを送信したいので、 <a href="JavaScript:document.form1.submit()"・・・ というふうに、書いたのですが、 リンクのみだとちゃんと動くのですが、 同一フォーム内にボタンとリンクが混在するとJavaScriptエラーが発生してしまします。どうしたらいいでしょうか？
- ベストアンサー
- HTML
- 指定したデータを別ページフォームへ引き継ぎたい!
問合せフォームとJAVASCRIPTに関する質問です。 ECサイトで、商品の説明ページが複数あります。 商品問合せを受け付けるようになっているのですが、各説明ページから「問合せ」ボタンをクリックした際に、問合せフォームの指定したテキストエリアに指定した文字列が入力されている状態にしたいのです。 例えば、商品番号がABC001の場合… ・商品説明ページに「ABC001」というデータを記載(HIDDENなど?) ・商品説明ページの問合せボタンを押すと、フォームの「商品番号」テキストエリアに既に「ABC001」という値が入っている ・商品説明ページの「ABC001」を「DEF002」に変更すると、フォームに入る値も「DEF002」になる これらの動作をCGI・PHPを使わずJAVASCRIPTで実現したいのですが、可能でしょうか。 ご回答、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- リンク先のフォームに値をいれるには…
こちらのカテゴリで合っているのかよくわかりませんが、教えていただけると助かります。 商品一覧のようなページ(HTML)から商品それぞれについているリンクを押すと、問い合わせフォームに飛び、フォームに選択した商品名が入力されているような形をとるにはどのようにすれば良いのでしょうか。 フォームは、無料のCGIを使用しております。 CGIの知識がほぼ皆無です。 簡単な方法や、無料で使えるCGI等を教えていただけますでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CGI
- フォームのテキストをリンク化するjavascript
ブログ等で利用されている、フォームのテキストにリンクをつけるjavascriptを教えてください。 （詳細） フォームのテキストを選択し、ボタンを押すとURLを入力するwindowが開くjavascript よろしくお願いします。
- 締切済み
- JavaScript
- 別ページからフォームへ移動したときにプルダウンの指定のメニューを自動選
別ページからフォームへ移動したときにプルダウンの指定のメニューを自動選択したいです！ メニューページのAというメニューから予約フォームへリンクしたときにフォームのプルダウンを自動で Aメニューを選択した状態で表示したいのですが、どうしたら出来るのかわかりません。 Javascriptかphpでサンプルや参考になるページがありましたら教えてください。
- 締切済み
- JavaScript
- javascriptで申し込みフォームを作るメリットは？
こんにちは。まったくの初心者の質問で恐縮です。 今回は、発生した問題を解決したいというより、 問題発生にあたって、自分の無知さを感じ、 webの常識ってどうなっているのだろう？と知りたくなり、 質問させていただいた次第です。 【背景】 BROBAというコンテンツ配信サービスに申し込もうと思った。 どうやら、申し込みフォームがjavascriptで制御されているらしい。 【問題発生】 ・出て来るウインドウは、大きすぎて、タスクバーを見えないように押し込め ないと、全体が表示できない。 ・やっと入力して、いざ申し込みボタンを押しても、 「ページが表示されません」と出てしまう。 【疑問発生】 ・出て来るウインドウが大きすぎるのは、私の使用しているモニターが 小さく、（15インチ）製作者が動作確認したモニターが大きかった ためか？ ・申し込みフォームを送信した時、ページが表示されないと出るのは、 javascriptならではの事なのか。CGIならこんな事は起こらないのか。 ・申し込みフォームなどは、CGIとかいうもので作られるのかと 思っていたのですが、javascriptで作るメリットってあるのでしょうか。 逆にデメリットもあるのでしょうか？ 以下は、同様にjavascriptの問い合わせフォームで、15インチモニターで 全表示できないものです。文章ではうまくご説明できませんので、 ご参考にお願い致します。 http://www.broba.cc/guide/inq.html 最終行「お問い合わせフォーム こちら からお問い合わせください。 」 の「こちら」のリンク。 何卒、宜しくお願い致します。
- 締切済み
- JavaScript
- フォームでCGIにとばした処理結果を。。
はじめまして。 JavaScriptもHTMLもCGIもほとんど初心者です。 現在フリーのCGI（Perl：アンケートフォーム）を使用しようとしてるのですが、HTMLファイルのformにあるactionで CGIにとばして、その結果を（JavaScriptで開いた？）新しいウィンドウに表示したいのですが、可能でしょうか？ さらに、出来ればその結果が表示される新しいウィンドウにはメニューバーやスクロールバーをなくして、「閉じる」というボタンをつけて閉じるようにしたいのですが、それも可能でしょうか？ 何卒よろしくお願いします。 =====
- ベストアンサー
- JavaScript
- あらかじめフォームに内容を入力させたい
こんにちは。フォーム入力に関することで質問させていただきます。 １つのページに１０個の商品を置き、それぞれの説明の横に 「お問い合わせはこちら」というリンクを貼っています。（リンク先は全て同じ） ですが、問い合わせのページ自体は全て同じなので、一体どの商品についての問い合わせなのか分かりません。 なので、問い合わせのページに一緒に商品番号を入力する欄を作ったのですが、わざわざお客様に商品番号を入力させるのは手間です。 なので、リンクをクリックして問い合わせページに移ったときに、あらかじめ商品番号が入力されている形にしたいのです。 <a href="contact.html?商品番号=123123123">お問い合わせはこちら</a> のような感じです。 しかし具体的にどうやればいいかわかりません。javascriptで再現できるでしょうか？ phpやcgiの知識はまったくないので、どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- パスワードつきリンク
ホームページのリンクをパスワード付きにしたいのです 携帯で使うのでフォームを使いたいのですが、探してみるとプロンプトを使うのしか見つかりませんでした CGIの設置は不可能なのでJavaScriptでリンクできるものを探しています 回答、よろしくお願いします
- 締切済み
- その他（インターネット・Webサービス）
補足
15mmさま> 丁寧にご回答頂き、本当にありがとうございました。 ご回答内容の「１．まず、リンクを以下のように書き換えます。」 <a href="form.html?mail">←メール用リンク・・・ とは、index.htmlのコンテンツの中の「メール相談画像」にリンク をはるのと、<a href="form.html?appoint">←予約用リンクは 通常の横メニューボタン（緑の）の診察予約ボタンにはればいいとの意味ですよね？ 一度、さっそく自分で試してみている途中ですが、またお時間が許される時でいいので、ご回答頂けると幸いです。