セレクトボックスの値に応じてフォームの項目を変える

前回に続いてWebフォームのお話。

これまた気になったことで、
例えば、お問い合わせ用のフォームをつくるとき、
お問い合わせの内容によっては入力して欲しい項目が変わることがあります。

よく、そういったフォームも見かけます。

例えば、一般的な問い合わせの場合は名前とメールアドレスが必須入力だけど
資料郵送の場合は住所も必須入力になる、といった具合に。

フォームの送信ボタンが押されたときの必須入力チェックでも制御はできまずが、どうせなら入力不要の項目はフォーム上に表示しない方がスマートなんじゃないかと考えました。

そこで、そんな実装を組んでみました。

まず、JavaScriptを外部ファイルとして用意。
仮に changeform.js とします。

[html]
var selectNomal = "一般のお問い合わせ";
var selectPost = "資料郵送";

function changeOptionalForm(){
if(document.getElementById("class").value == selectNomal){
//一般のお問い合わせの場合
document.getElementById("nomalForm").style.display = "";
document.getElementById("postForm").style.display = "none";
} else if(document.getElementById("class").value == selectPost){
//資料郵送の場合
document.getElementById("nomalForm").style.display = "none";
document.getElementById("postForm").style.display = "";
} else {
//その他の時は上記を表示しない
document.getElementById("nomalForm").style.display = "none";
document.getElementById("postForm").style.display = "none";
}
};
[/html]

続いて、HTMLはこんな感じ。
一部はしょってますが・・・

[html]
<head>
<script type="text/javascript" src="js/changeform.js" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
changeOptionalForm();
});
</script>
</head>
<body>
<form action="hoge.php" method="post" id="form">
<select name="class">
<option value="一般のお問い合わせ">一般のお問い合わせ</option>
<option value="資料郵送">資料郵送</option>
<option value="その他">その他</option>
</select>
<div id="nomalForm" style="display:none;">
<!– 一般のお問い合わせの時の入力項目 –>
</div>
<div id="postForm" style="display:none;">
<!– 資料郵送の時の入力項目 –>
</div>
</form>
</body>
[/html]

と、こんな具合でいかがでしょうか。

もちろん、Submit時の入力チェックなどをお忘れなく。

スポンサーリンク