札幌でWebデザイナーをやっているRINの勉強ブログ。Web Design/PHP/CSS/写真メイン
In: JavaScriptを学ぶ
29 6月 2009フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？
そんな時、押した項目によってその後の内容を変化させれば
項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。
JavaScriptはかなりの初心者なので忘れないようメモしてみました。
・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。
・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。
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>
inputに「onclick=”関数名() 」を追加する。
<input type="radio" name="entryPlan" value="firstEntry" onclick="entryChange1(); />
最初に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()">
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>
selectに「id=”changeSelect”」「onchange=”関数名() 」を追加する。
<select id="changeSelect" name="hoge" onchange="entryChange2();">
<option value="select1">初めて申し込む</option>
<option value="select2">2度目以降の利用</option>
</select>
もしIDがchangeSelectだったらこの中を実行
if(document.getElementById(‘changeSelect’)){
//この中を実行
}
changeSelectの中で選んだvalueの値を変数【id】に代入
id = document.getElementById(‘changeSelect’).value;
もし変数【id】(valueの値)が同じならこの中を実行
if(id == ‘select1′){
//この中を実行
}else if(id == ‘select2′){
//この中を実行
}
今回のサンプルのようにひとつのページ内で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する事が沢山あって難しいな～と感じました。
それにしても動的な書き換えって面白い！少しずつ使いこなせるようにがんばろうと思います。
会社のプログラマに色々教えて貰いながらの作業でとても感謝でした！
Name:RIN
Age:27
性別:男
Location:Sapporo
Job:Webデザイナー
札幌のWebデザイナーです。
Web Design/PHP/CSS/写真が
メインの勉強ブログです。
思い立ったがfollow me!
Twitter:rin316
6 Responses to JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
10-89
5月 7th, 2010 at 15:38
はじめまして
こんにちは。
10-89と申します。
現在制作中の決済サービスの選択で、この記事と同じ動作をしたかったので大変参考になりました。
ありがとうございました！
rin316
5月 8th, 2010 at 02:44
10-89さん
初めまして。
拙い記事ですがお役に立てたようで嬉しいです！
こちらこそコメントをありがとうございます。
hello!
11月 16th, 2010 at 23:11
おかげで助かりました！ありがとうございます。
バレンシア
5月 26th, 2011 at 19:08
参考にさせていただきました。
例えばラジオボタンでA、B、Cの３つのブロックを切り替えられるものとします。
Aのブロックにはtextとselectのフォームがあり、それらを入力または選択した状態でBのブロックに切り替えた場合、さきほどAで入力または選択しかけた値が残ったままになります。
フォームを切り替えた時に前のブロックで入力した選択した値が自動的にリセットというか初期化されるにはどうしたらよいでしょうか？
ジョジョ
5月 29th, 2011 at 00:19
仕事でこの実装の必要がありまして大変参考なりました。
感謝してます！！
今後も色々なTIPSを是非とも更新下さい。
応援してます！
GJ
8月 31st, 2011 at 01:05
大変わかりやすくサンプルもあってとてもいいです。