フォームの入力時の項目切替について
- フォームの入力時に、変更項目に応じて入力欄を切り替える方法について質問です。
- フォームで各種変更依頼を受け付けるため、変更項目によって表示される入力欄を変えたいと思っています。
- 変更項目ごとにフォームを作るのではなく、一つのフォーム内で処理する方法はありますか？
- ベストアンサー
フォームの入力時の項目切替について
メールフォームを作っているのですが、以下の機能が出来るかお伺いしたく質問させていただきます。 フォーム入力欄にて ・変更項目：「１」・「２」・「３」・「４」 ・名前： ・郵便番号： ・住所： ・メールアドレス： ・備考： 上記の普通のフォームがあるとして、一番最初の変更項目にて 「１」を選択した場合には、その下にある→変更項目、名前、郵便番号、住所、備考の入力ボックスのみ残し他のメールアドレス入力欄は未表示にする。 また、変更項目欄にて「２」を選択した場合には→変更項目、名前、備考の入力ボックスのみ残し他の郵便番号、住所入力欄は未表示にする。 と言ったような事を行ないたいと考えております。 要は、フォームで各種変更依頼なるものを作成し、会員であるお客様に対し変更項目の内容を入力していただこうとしています。 ですが、変更項目毎にフォームを作るのも可能ですが、どうせなら１つのフォームで処理できるのであればと考えました。 また、お客様にとって初めに変更項目を選択していただき残りの入力欄は必要箇所だけ残っていれば、少々親切かな？とも考えております。 スクリプトが分かれば良いのですが、色々と検索してみても発見できなかったので質問させていただきました。 参考URLがあれば教えていただくだけでも結構ですし、スクリプトがあるようでしたら宜しくお願いいたします。
- ishibo_062
- お礼率26% (8/30)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞フォームの欄はＤＬを使用した模擬？テーブルレイアウト と、いわれても具体的な事がわからないので勝手にフォームとしてそれらしい形(fieldsetで分類)でサンプルを書きました。 要は、四つの変更項目をまとめた部分にonclickを 各項目にはidを付けてあればHTML部分はあまり関係ないので適当にアレンジするなり、これにスタイルを付けて希望の形にするなりしてください。 <html> <head> <title></title> <script type="text/javascript"> window.onload=sample; function sample(){ // 切り替える項目(id) var id_list = 'tel postno addr mail pass'; // checkboxとの関係 var setting = { 'f_addr':['tel','postno','addr'], 'f_tel':['tel'], 'f_mail':['mail'], 'f_pass':['pass'] } var items = new Object; var ids = id_list.split(' '); for(var i=0;ids[i];i++)items[ids[i]] = false; for(var x in setting) if(document.getElementById(x).checked) for(var i=0;setting[x][i];i++) items[setting[x][i]] = true; for(var x in items) { var Item = document.getElementById(x); Item.disabled = ! items[x]; Item.style.visibility = (items[x])?'':'hidden'; } } </script> </head> <body> <form> <fieldset><legend>お客様のID・お名前</legend> <label for="id">会員ID</label><input type="text" name="id" id="id"> <label for="name">お名前</label><input type="text" name="name" id="name"> </fieldset> <fieldset onclick="sample()"> <legend>変更する項目</legend> <label for="f_addr">(1)お届け先住所の変更</label><input type="checkbox" name="f_addr" value="1" id="f_addr"> <label for="f_tel">(2)お電話番号の変更</label><input type="checkbox" name="f_tel" value="2" id="f_tel"> <label for="f_mail">(3)メールアドレスの変更</label><input type="checkbox" name="f_mail" value="3" id="f_mail"> <label for="f_pass">(4)会員パスワードの変更</label><input type="checkbox" name="f_pass" value="4" id="f_pass"> </fieldset> <fieldset><legend>変更内容</legend> <ul> <li><label for="tel">新お電話番号</label><input type="text" name="tel" id="tel"></li> <li><label for="postno">郵便番号</label><input type="text" name="postno" id="postno"></li> <li><label for="addr">新ご住所</label><input type="text" name="addr" id="addr"></li> <li><label for="mail">メールアドレス</label><input type="text" name="mail" id="mail"></li> <li><label for="pass">会員パスワード</label><input type="text" name="pass" id="pass"></li> </ul> </fieldset> <fieldset><legend><label for="comment">備考</label></legend> <textarea name="comment" id="comment"></textarea> </fieldset> </form> </body> </html>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
Javascriptで不要になる項目をdisable化する、って事はそれほど難しくないとは思うけど。 ＜あくまで例＞ function hoge(s){ if( s == '1'){//selectで選ばれた値は1? document.getElementById('t0').disabled = true;//t0は無効 document.getElementById('t1').disabled = false;//t1は有効 }else if(s=='2'){ ・・・ } <select id="s0" onchange="hoge(this.value)"> <option value="-">選んでください</option> <option value="1">1</option> </select> <input type="text" id="t0"> <input type="text" id="t1"> ＞変更項目：「１」・「２」・「３」・「４」 ってのは、同時に二つとか選ぶ事ができるもの？ それとも常にどれか一つ？ あと、 ・変更項目：「１」・「２」・「３」・「４」 ・名前： ・郵便番号： ・住所： ・メールアドレス： ・備考： この部分の具体的なHTML、どれを選んだらどれが有効になるかを補足しておけば、回答もより具体的になると思います。
補足
アドバイスありがとうございます。 ＞変更項目：「１」・「２」・「３」・「４」 ってのは、同時に二つとか選ぶ事ができるもの？ それとも常にどれか一つ？ ２つと言うものもあります。 具体的には、以下の配置となります。 １・会員ID ２・お名前 ３・変更内容→(1)お届け先住所の変更 (2)お電話番号の変更 (3)メールアドレスの変更 (4)会員パスワードの変更 ４・新お電話番号 ５・新郵便番号 ６・新ご住所 ７・メールアドレス ８・会員パスワード ９・備考 上記のフォームメール内容となっております。 １・２を通常入力して頂き、３の(1)を選択した場合は、１・２・３ ・４・５・６・９の項目が表示され、(2)を選んだ場合は１・２・３ ・４・９が表示され、(3)を選んだ場合は、１・２・３・７・９の表示 で、(4)を選んだときには、１・２・３・８・９が表示されるように したいのが構想です。 同様の機能で他に便利な方法があれば良いのですが、現時点で自分が 思いつく方法が上記の方法となります。 実際に出来るかどうかは不明ですが、以前にどこかのサイトで見たことがある覚えがあり質問してみました。 サイトはＨＴＭＬ+ＣＳＳで制作しており、フォームの欄はＤＬを使用した模擬？テーブルレイアウトになっております。 また、欲を言うと左の変更項目はそのままに右の入力欄が選択後に削除されたり出現したりとアクションが出来ると良いかな？と思って います。 複雑？な感じで説明も不十分ではありますが、何卒ご教授お願いします。
関連するQ&A
- フォームの大分類項目の正式な読み方？
フォームによっては、一つのフォーム内で各入力項目（入力欄）が関連のある項目ごとにグループ化され分類されているものがあります。 例えば、以下の例では各入力項目（入力欄）が「お客様情報」と「旅行プラン」という二つのグループに分類されていますが、この各入力項目を分類しているグループ（以下の例では、「お客様情報」と「旅行プラン」）を”正式には”何と呼ぶのでしょうか（大分類項目とかでしょうか？）？ 例： ＜入力項目ごとの分類＞ [入力項目] フォーム ＜お客様情報＞ [お名前] [住所] [住所] ＜旅行プラン＞ [目的地] [出発日] [帰着日] [人数] よろしくお願いします。 詳しい解説が記載されたサイトのアドレスなどでも結構です。
- 締切済み
- CSS
- ネットショップの注文フォームで注文者住所を送付住所に一発コピーしたい
ネットショップで使っている注文フォームについて質問ですm(_ _)m オーダーメイドの商品を作るショップで、入力してもらう項目数が多いため、 買い物カゴではなくて、メールフォームを使いって注文してもらってます。 使っているメールフォームは、ホームページの飾り職人さんのPerlMailer 3.02です。 http://www.din.or.jp/~hideyuki/home/cgi/mailer.html これだと、入力していただくページがHTMLで自由に設定できるので、 項目や入力方法も自由に選択出来ますし、細かい注意書きや、デザインなども 全て好きに出来るので、ずっと使っているのですが、 出来れば下記の機能を追加できたら良いな、と思っています。 ご注文者様の名前・フリガナ・郵便番号・住所・電話番号をご入力いただいた後、送付先の入力欄で、 プルダウン、ラジオボタンなどで「ご注文者様の住所に送付」という項目を選択すると、 自動的に、送付先名前・フリガナ・郵便番号・住所・電話番号の入力欄に、 ご注文者様の名前・フリガナ・郵便番号・住所・電話番号がコピーされる。 javascriptなどで出来るものでしょうか？ ぜひ、教えて下さい！m(_ _)m
- 締切済み
- その他（プログラミング・開発）
- 別のウィンドウのフォームへの入力
個人情報の登録フォームを作成しようとしています。 住所の入力手間を減らそうと、郵便番号を入力して、 検索ボタンを押すと、別のウィンドウが開き、郵便番号 にマッチした住所が羅列され、どれかを選択することで 基のウィンドウの住所欄に選択された住所が入るという 処理を作っています。 同一ウィンドウ内でフレームを切れば、うまく 動くのですが、別のウィンドウからだと入力がうまく 動きません。 別のウィンドウのFormオブジェクトの扱い方を 教えていただけませんか？
- 締切済み
- JavaScript
- フォームでの入力必須項目について
フォームの必須入力項目について、未記入や間違いの場合、エラーメッセージを表示させたいと考えています。 http://www.tagindex.com/javascript/form/index.html 上記ページを参考にしてみましたが、 テキストフィールドやメールアドレスの入力、セレクトボックスの選択を、１つのページで同時にチェックする方法が分からず、困っています。 ちなみに現在は、 <head></head>内に個々のスクリプトを全て記入していますが、同時に２つ以上のスクリプトを埋め込むとどれか１つしか動作しません。 どなたかご教示ください。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- メールフォームの項目が前後してしまいます。
メールフォームの項目が前後してしまいます。 CGIでメールフォームを作成し、長い間利用していました。 今までこのようなことは一度もなかったのですが、今回初めて以下のようなことが起きたので質問させてください。 メールフォームの内容は基本的には以下のような並びで送られてきます。 フォームに名前、住所、電話番号・・・を入力していただいて、送信ボタンを押すとメールが送信され、項目がメールの内容に記載されているというシンプルなメールフォームです。 (1) ・名前 ・フリガナ ・住所 ・電話番号 ・お問い合わせ内容 この並びが、 (2) ・フリガナ ・住所 ・お問い合わせ内容 ・お名前 ・電話番号 のように、バラバラで送信されてきました。 こちらからテストメールを送信して確認してみたのですが (1)のようにきちんと並んで送信されています。 このような並びで飛んできたメールは3通あったのですが、 フォームは３つとも違うフォーム（中身は一緒ですが、同一のフォームから送信されているのではありません。）で、送信者（お問い合わせ者）は全て同一人物でした。 どのような可能性が考えられるでしょうか？ フォームはCGIです。 Perlのバージョンは5.8.xです。 レンタルサーバーはさくらインターネットスタンダードプランです。 よろしくお願いいたします。
- ベストアンサー
- CGI
- フォーム入力チェックで入力内容がクリア
javascriptで、フォームの入力チェック機能をつくっています。必須入力項目が【名前】【住所】の場合、【名前】欄は入力済み／【住所】欄は未入力ケースで、アラートメッセージをＯＫ押下した後フォーム上の【名前】欄がクリアされてしまいます。 ネットでサンプルになりそうなコードをいろいろ見て作っているのですが、なかなか上手くいきません。解決方法をご存知の方がいらっしゃったら教えてください。
- ベストアンサー
- JavaScript
- アクセス/フォームでの名前の選択入力
アクセス2000 住所テーブルに名簿ID、名前、ふりがな、フィールド有り。 売上伝票フォームの名前欄にコンボボックスを作って名前のリストを表示させ選択入力しています。 住所テーブルの名前が100を超えるようになったので、売上伝票フォーム上に、よみ（ふりがなの2文字位を入れる)欄を作って、上記コンボボックスで表示する名前を”よみ”で絞り込みたい。 "よみ"欄など作る必要がなければその方法でよいです。 アクセス幼稚園生です。このWebの過去の履歴の中に有るのかも知れませんが、よろしく。
- 締切済み
- オフィス系ソフト
- フォームメールに入力された郵便番号から住所を自動入力してもらいたい
ホームページビルダー１１で初めてホームページを作成しているものです。 フォームメールで入力の手間やミスを防ぐため、 郵便番号を入力すると、 次の項の都道府県欄や住所欄に 自動的に入力されるようにしたいと思っています。 データは郵便局のサイトで配布しているようですが、、 このデータをどのように使うのか分かりません。 ご存知の方、よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- access 入力フォームの特定の項目が変更できない 編集ロック？
access初心者です。どうぞお知恵をお貸しください。 [access2007] 前任者が作成した請求書入力フォームの中で、「諸経費」の項目のみ変更ができません。（他の項目は変更可能でした） 編集ロックがかかっているのかと思い、そのテキストボックスのプロパティを見てみましたが、なぜか「編集ロック」の欄が出てきません。（その欄だけ抜けているのです） この項目を変更するには、どのように対処すれば良いでしょうか。
- 締切済み
- その他MS Office製品
- アクセス：フォーム入力：【大項目→中項目への絞りこみ入力】方法を教えてください。
アクセス初心者です。よろしくお願いします。 【やりたいこと：次のような大項目→中項目への絞りこみ入力】 フォームの入力で、大項目をリストで選ぶと、次に小項目のリストが自動で出て入力できるようにしたい。 ◆まず、テーブルで「大項目コード」表があります。 １ A ２ B ３ … ◆別のテーブルで、 「Aの小項目」表 １１ ○ １２ × １３ △ 「Bの小項目」表 ２１ ● ２３ ■ ２４ ▲ というようなものがあります。 そこで、フォームで「大項目」フィールドに「１」（＝A）を入力すると「小項目」フィールドに自動でコンボボックスのようなもので「○、×、△」がリストが出てコード番号（１１，１２，１３）が入力できる、同様に「大項目」に「２」（＝Ｂ）と入力するとリスト「●、■、▲」で選んで入力したいのです。 私が初心者であることから、上記のようなアクセス構築の考え方そのものも邪道なものかどうか、不安があります。 要は、【大項目→中項目への絞りこみ入力】ができればいいのです。できますなら、できるだけシンプルな方法を教えてくだされば幸いです。 よろしくお願いいたします。
- ベストアンサー
- オフィス系ソフト
お礼
大変親切に回答していただきありがとう御座いました。 CSSに関しての内容は最近になりようやく理解しつつある中、 JavaScriptとなると色々な命令文なりで今の段階ではまだまだ 未知の世界でした。 おかげさまで無事設置が出来、テストを行なった際も問題なく動作 を致しました。 今後もまた不明な点がありましたら質問させていただくことも あるかと思いますが、その際には是非宜しくお願いいたします。 親切、且つご丁寧な回答をして頂き本当にありがとうございました。