こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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

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

投稿日時 - 2008-03-25 01:34:48

QNo.3892347

すぐに回答ほしいです

質問者が選んだベストアンサー

#1です。

>フォームの欄はDLを使用した模擬?テーブルレイアウト
と、いわれても具体的な事がわからないので勝手にフォームとしてそれらしい形(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>

投稿日時 - 2008-03-25 20:49:19

お礼

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

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

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

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

投稿日時 - 2008-03-26 05:34:29

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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



>変更項目:「1」・「2」・「3」・「4」
ってのは、同時に二つとか選ぶ事ができるもの?
それとも常にどれか一つ?

あと、
・変更項目:「1」・「2」・「3」・「4」
・名前:
・郵便番号:
・住所:
・メールアドレス:
・備考:
この部分の具体的なHTML、どれを選んだらどれが有効になるかを補足しておけば、回答もより具体的になると思います。

投稿日時 - 2008-03-25 08:44:20

補足

アドバイスありがとうございます。

>変更項目:「1」・「2」・「3」・「4」
ってのは、同時に二つとか選ぶ事ができるもの?
それとも常にどれか一つ?

2つと言うものもあります。
具体的には、以下の配置となります。

1・会員ID
2・お名前
3・変更内容→(1)お届け先住所の変更 (2)お電話番号の変更
       (3)メールアドレスの変更 (4)会員パスワードの変更
4・新お電話番号
5・新郵便番号
6・新ご住所
7・メールアドレス
8・会員パスワード
9・備考

上記のフォームメール内容となっております。

1・2を通常入力して頂き、3の(1)を選択した場合は、1・2・3
・4・5・6・9の項目が表示され、(2)を選んだ場合は1・2・3
・4・9が表示され、(3)を選んだ場合は、1・2・3・7・9の表示
で、(4)を選んだときには、1・2・3・8・9が表示されるように
したいのが構想です。
同様の機能で他に便利な方法があれば良いのですが、現時点で自分が
思いつく方法が上記の方法となります。

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

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

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

投稿日時 - 2008-03-25 08:58:37

あなたにオススメの質問