JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト

29 6月 2009

こんなことありませんか？

フォームを作っていて、項目が多くなり過ぎてユーザーがストレスを感じそうな時。
そんな時、押した項目によってその後の内容を変化させれば
項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはず。
JavaScriptはかなりの初心者なので忘れないようメモしてみた。

【サンプル】例えばお申し込みフォームで…

・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。
・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。

利用方法	初めて申し込む 2度目以降の利用
紹介者	紹介された方のお名前を入力してください。
会員番号	会員番号を入力してください。

特典:初めての方は30%オフ！

サンプルソース(ラジオボタン)

HTML


<form>
<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th>利用方法</th>
		<td>
			<label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />初めて申し込む</label>
			<label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />2度目以降の利用</label>
		</td>
	</tr>

	<!-- 表示非表示切り替え -->
	<tr id="firstBox">
		<th>紹介者</th>
		<td><input type="text" />
		<p>紹介された方のお名前を入力してください。</p></td>
	</tr>
	
	<!-- 表示非表示切り替え -->
	<tr id="secondBox">
		<th>会員番号</th>
		<td><input type="text" />
		<p>会員番号を入力してください。</p></td>
	</tr>
</table>
</form>


<!-- 表示非表示切り替え -->
<div id="firstNotice">
	特典:初めての方は30%オフ！
</div>

JavaScript

<script type="text/javascript">
	function entryChange1(){
		radio = document.getElementsByName('entryPlan') 
		if(radio[0].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "";
			document.getElementById('secondBox').style.display = "none";
			//特典
			document.getElementById('firstNotice').style.display = "";
		}else if(radio[1].checked) {
			//フォーム
			document.getElementById('firstBox').style.display = "none";
			document.getElementById('secondBox').style.display = "";
			//特典
			document.getElementById('firstNotice').style.display = "none";
		}
	}
	
	//オンロードさせ、リロード時に選択を保持
	window.onload = entryChange1;
</script>

HTML側の説明

inputに「onclick=”関数名() 」を追加する。

JavaScript側の説明

最初にfunctionで関数名【entryChange1】を作る。

function entryChange1(){
　　　　//内容
}

変数【radio】に、フォームのname【entryPlan】が一致するものを代入する。

radio = document.getElementsByName(’entryPlan’)

もし1つ目のラジオボタンがチェックされたら1を実行、もし2つ目なら2を実行。

if(radio[0].checked) {
　　　　//1を実行
}else if(radio[1].checked) {
　　　　//2を実行
}

表示/非表示の切り替えはIDのdisplayを変える。

document.getElementById(’【ID名】’).style.display = “【表示方法】”;

こんな感じで切り替え。

if(radio[0].checked) {
　　　　document.getElementById(’firstBox’).style.display = “”;
}else if(radio[1].checked) {
　　　　document.getElementById(’firstBox’).style.display = “none”;
}

最初「display = “inherit”;」と書いたらIE6でエラーが出て切り替わらなかったので、
「display = “”;」と空白で記載したらうまく動いた。
今回であれば表示される行の所は「display = “table-row”;」
特典の所は「display = “block”;」でもOK

このままだと読み込み時にラジオボタンをクリックするまで両方の行が出てしまうので、
作った関数【entryChange1】をオンロードさせる。
最初「entryChange1()」のように「()」を付けていたら動かなくて困った。。

//オンロードさせ、リロード時に選択を保持
window.onload = entryChange1;

htmlのbodyに記載する方法もある。
ただbodyに入れるとjsとhtmlが分離されず管理が大変になりそう

サンプルソース(セレクトボックス)

利用方法
紹介者	紹介された方のお名前を入力してください。
会員番号	会員番号を入力してください。

特典:初めての方は30%オフ！

HTML


<form>
<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<th>利用方法</th>
		<td>
			<select id="changeSelect" name="hoge" onchange="entryChange2();">
				<option value="select1">初めて申し込む</option>
				<option value="select2">2度目以降の利用</option>
			</select>
		</td>
	</tr>

	<!-- 表示非表示切り替え -->
	<tr id="firstBox2">
		<th>紹介者</th>
		<td><input type="text" />
		<p>紹介された方のお名前を入力してください。</p></td>
	</tr>
	
	<!-- 表示非表示切り替え -->
	<tr id="secondBox2">
		<th>会員番号</th>
		<td><input type="text" />
		<p>会員番号を入力してください。</p></td>
	</tr>
</table>
</form>


<!-- 表示非表示切り替え -->
<div id="firstNotice2">
	特典:初めての方は30%オフ！
</div>

JavaScript

<script type="text/javascript">
	function entryChange2(){
		if(document.getElementById('changeSelect')){
			id = document.getElementById('changeSelect').value;
			
			if(id == 'select1'){
				//フォーム
				document.getElementById('firstBox2').style.display = "";
				document.getElementById('secondBox2').style.display = "none";
				//特典
				document.getElementById('firstNotice2').style.display = "";
			}else if(id == 'select2'){
				//フォーム
				document.getElementById('firstBox2').style.display = "none";
				document.getElementById('secondBox2').style.display = "";
				//特典
				document.getElementById('firstNotice2').style.display = "none";
			}
		}
	}
	
	//オンロードさせ、リロード時に選択を保持
	window.onload = entryChange2;
</script>

HTML側の説明

selectに「id=”changeSelect”」「onchange=”関数名() 」を追加する。

<select id="changeSelect" name="hoge" onchange="entryChange2();">
　　　　<option value="select1">初めて申し込む</option>
　　　　<option value="select2">2度目以降の利用</option>
</select>