- ベストアンサー
フォームの入力時の項目切替について
- フォームの入力時に、変更項目に応じて入力欄を切り替える方法について質問です。
- フォームで各種変更依頼を受け付けるため、変更項目によって表示される入力欄を変えたいと思っています。
- 変更項目ごとにフォームを作るのではなく、一つのフォーム内で処理する方法はありますか？
- 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)を選んだときには、１・２・３・８・９が表示されるように したいのが構想です。 同様の機能で他に便利な方法があれば良いのですが、現時点で自分が 思いつく方法が上記の方法となります。 実際に出来るかどうかは不明ですが、以前にどこかのサイトで見たことがある覚えがあり質問してみました。 サイトはＨＴＭＬ+ＣＳＳで制作しており、フォームの欄はＤＬを使用した模擬？テーブルレイアウトになっております。 また、欲を言うと左の変更項目はそのままに右の入力欄が選択後に削除されたり出現したりとアクションが出来ると良いかな？と思って います。 複雑？な感じで説明も不十分ではありますが、何卒ご教授お願いします。
お礼
大変親切に回答していただきありがとう御座いました。 CSSに関しての内容は最近になりようやく理解しつつある中、 JavaScriptとなると色々な命令文なりで今の段階ではまだまだ 未知の世界でした。 おかげさまで無事設置が出来、テストを行なった際も問題なく動作 を致しました。 今後もまた不明な点がありましたら質問させていただくことも あるかと思いますが、その際には是非宜しくお願いいたします。 親切、且つご丁寧な回答をして頂き本当にありがとうございました。