- ベストアンサー
3つのフォームを作成し、トップからのリンク先を指定フォームに切り替えたい
- JavaScript初心者です。3つのフォームを作成し、トップからのリンク先を指定フォームに切り替えたいと考えています。
- サブpageで各フォームを一つのhtmlにまとめたいため、iframeもしくはinnerHTMLを使用してフォームを切り替えたいと考えています。
- 特定の条件に応じて、メール相談画像ボタンからのリンク先をお問い合わせフォームに、診察予約ボタンからのリンク先を予約フォームに切り替えたいです。
- 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の無効・非対応ブラウザへの配慮はまったく視野に 入れてなかったのですが、やはりフォームはに非表示になってしまうとさすがに痛いので、是非この機会に＃１に関してで教えて頂けると、 幸いです。 またお時間が許される時に、宜しくお願いします。
補足
15mmさま> 丁寧にご回答頂き、本当にありがとうございました。 ご回答内容の「１．まず、リンクを以下のように書き換えます。」 <a href="form.html?mail">←メール用リンク・・・ とは、index.htmlのコンテンツの中の「メール相談画像」にリンク をはるのと、<a href="form.html?appoint">←予約用リンクは 通常の横メニューボタン（緑の）の診察予約ボタンにはればいいとの意味ですよね？ 一度、さっそく自分で試してみている途中ですが、またお時間が許される時でいいので、ご回答頂けると幸いです。