フォームの入力時の項目切替について

解決済

質問者：ishibo_062
質問日時：2008/03/25 01:34
回答数：2件

メールフォームを作っているのですが、以下の機能が出来るかお伺いしたく質問させていただきます。

フォーム入力欄にて
・変更項目：「１」・「２」・「３」・「４」
・名前：
・郵便番号：
・住所：
・メールアドレス：
・備考：
上記の普通のフォームがあるとして、一番最初の変更項目にて
「１」を選択した場合には、その下にある→変更項目、名前、郵便番号、住所、備考の入力ボックスのみ残し他のメールアドレス入力欄は未表示にする。
また、変更項目欄にて「２」を選択した場合には→変更項目、名前、備考の入力ボックスのみ残し他の郵便番号、住所入力欄は未表示にする。

と言ったような事を行ないたいと考えております。

要は、フォームで各種変更依頼なるものを作成し、会員であるお客様に対し変更項目の内容を入力していただこうとしています。
ですが、変更項目毎にフォームを作るのも可能ですが、どうせなら１つのフォームで処理できるのであればと考えました。
また、お客様にとって初めに変更項目を選択していただき残りの入力欄は必要箇所だけ残っていれば、少々親切かな？とも考えております。

スクリプトが分かれば良いのですが、色々と検索してみても発見できなかったので質問させていただきました。
参考URLがあれば教えていただくだけでも結構ですし、スクリプトがあるようでしたら宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： steel_gray
回答日時：2008/03/25 20:49

#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>

- 0
- 件

通報する

この回答へのお礼

大変親切に回答していただきありがとう御座いました。
CSSに関しての内容は最近になりようやく理解しつつある中、
JavaScriptとなると色々な命令文なりで今の段階ではまだまだ
未知の世界でした。

おかげさまで無事設置が出来、テストを行なった際も問題なく動作
を致しました。

今後もまた不明な点がありましたら質問させていただくことも
あるかと思いますが、その際には是非宜しくお願いいたします。

親切、且つご丁寧な回答をして頂き本当にありがとうございました。

通報する

お礼日時：2008/03/26 05:34

No.1

回答者： steel_gray
回答日時：2008/03/25 08:44

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)を選んだときには、１・２・３・８・９が表示されるように
したいのが構想です。
同様の機能で他に便利な方法があれば良いのですが、現時点で自分が
思いつく方法が上記の方法となります。

実際に出来るかどうかは不明ですが、以前にどこかのサイトで見たことがある覚えがあり質問してみました。
サイトはＨＴＭＬ+ＣＳＳで制作しており、フォームの欄はＤＬを使用した模擬？テーブルレイアウトになっております。

また、欲を言うと左の変更項目はそのままに右の入力欄が選択後に削除されたり出現したりとアクションが出来ると良いかな？と思って
います。

複雑？な感じで説明も不十分ではありますが、何卒ご教授お願いします。