5am! Web Illusions » JavaScriptを学ぶ http://5am.jp 札幌の制作会社でWebデザイナーをしています。眼瞼下垂手術後の眼瞼痙攣の悪化と日々健闘中。 Fri, 13 Apr 2012 04:35:49 +0000 ja hourly 1 http://wordpress.org/?v=3.1 JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト http://5am.jp/javascript/form_change_javascript/ http://5am.jp/javascript/form_change_javascript/#comments Sun, 28 Jun 2009 16:11:10 +0000 rin316 http://5am.jp/?p=165

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

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

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

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

利用方法
紹介者
紹介された方のお名前を入力してください。
会員番号
会員番号を入力してください。
特典:初めての方は30%オフ！

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

HTML

[html]
利用方法
紹介者

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

会員番号を入力してください。
特典:初めての方は30%オフ！
[/html]

JavaScript

[javascript] [/javascript]

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

[html]
利用方法
紹介者

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

会員番号を入力してください。
特典:初めての方は30%オフ！
[/html]

JavaScript

[javascript] [/javascript]

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://5am.jp/javascript/form_change_javascript/feed/ 6