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

In: JavaScriptを学ぶ

29 6月 2009

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

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

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

・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。
・【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=”関数名() 」を追加する。

<input type="radio" name="entryPlan" value="firstEntry" onclick="entryChange1(); />

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が分離されず管理が大変になりそう

<body onload="entryChange1()">

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

利用方法
紹介者
紹介された方のお名前を入力してください。
会員番号
会員番号を入力してください。
特典:初めての方は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>

JavaScript側の説明

もしIDがchangeSelectだったらこの中を実行

if(document.getElementById(‘changeSelect’)){
　　　　//この中を実行
}

changeSelectの中で選んだvalueの値を変数【id】に代入

id = document.getElementById(‘changeSelect’).value;

もし変数【id】(valueの値)が同じならこの中を実行

if(id == ‘select1′){
　　　　//この中を実行
}else if(id == ‘select2′){
　　　　//この中を実行
}

ひとつのページ内で複数のwindow.onloadが動作しない

今回のサンプルのようにひとつのページ内で2箇所以上window.onloadを使おうとしたら
最後のwindow.onload以外は反映されない問題が発生。。
下の例だとentryChange2しかonloadが反映されない。

window.onload = entryChange1;
window.onload = entryChange2;

そこで2つを1つの関数【init】にまとめてonloadしたら上手く反映された！

function init(){
　　　　entryChange1();
　　　　entryChange2();
}
window.onload = init;

ただこれだと、複数のJavaScriptライブラリがあって、
他にwindow.onloadが使われている場合上書きしてしまうので、
正確にはaddEventListener() メソッドとattachEvent()メソッドを使うのがベストみたいです。

動的な書き換えって面白い！

JavaScriptは初心者だったので、onloadのタイミングだったり、ブラウザによる差異などなど
fixする事が沢山あって難しいな～と感じました。
それにしても動的な書き換えって面白い！少しずつ使いこなせるようにがんばろうと思います。
会社のプログラマに色々教えて貰いながらの作業でとても感謝でした！

  • http://10-89.com/life/ 10-89

    はじめまして
    こんにちは。
    10-89と申します。

    現在制作中の決済サービスの選択で、この記事と同じ動作をしたかったので大変参考になりました。
    ありがとうございました！

  • rin316

    10-89さん
    初めまして。
    拙い記事ですがお役に立てたようで嬉しいです！
    こちらこそコメントをありがとうございます。

  • hello!

    おかげで助かりました！ありがとうございます。

  • バレンシア

    参考にさせていただきました。
    例えばラジオボタンでA、B、Cの３つのブロックを切り替えられるものとします。
    Aのブロックにはtextとselectのフォームがあり、それらを入力または選択した状態でBのブロックに切り替えた場合、さきほどAで入力または選択しかけた値が残ったままになります。
    フォームを切り替えた時に前のブロックで入力した選択した値が自動的にリセットというか初期化されるにはどうしたらよいでしょうか？

  • ジョジョ

    仕事でこの実装の必要がありまして大変参考なりました。
    感謝してます！！
    今後も色々なTIPSを是非とも更新下さい。
    応援してます！

  • GJ

    大変わかりやすくサンプルもあってとてもいいです。

  • Natu9762010

    ありがとうございます！

  • はら

    ここのページのソースを見ると上部にphpのソースらしきものが
    見受けられますがなんでしょうか?

  • Pingback: 表示・非表示　[JavaScript] | thebasicbasics.info

  • ミケノミスト

    参考になりました！ありがとです！

  • Betergius

    IEやsafariなどchrome以外で、初期状態でfirstboxもsecondboxも両方表示されていて両方のフォームに入力できちゃったので困ってましたが、解決！ id=”inputFirst” と id=”inputSecond” をそれぞれのinputタグに付け加えると正常に動きました！
    （ここのソース見て発覚しました・・・）

  • JOJO

    参考になりました。ありがとうございます。

  • Pingback: javascript | sleepingrabbit

  • McKee

    まだkintoneもjsもビギナーなので大変助かりました！！
    勉強して使わせていただきます！！

  • ヲ宝島

    大変助かりました。
    ありがとうございます。
    今後も、どうぞ、よろしくお願いいたします。

Profile

Name:RIN
Location:Sapporo

札幌でWebエンジニアをしています。東京の会社にリモート勤務。
JavaScript, PHPの勉強がメインのブログです。

GitHub:rin316

Twitter:rin316

Photostream

Categories

Archives

Copyright © 2007 - 5am! Web Illusions - is proudly powered by WordPress | ログイン

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com