jQueryの勉強を引き続き実施。今回はhtmlの内容を書き換えるプログラムコードを書いてみて実装。
ページを表示したときに指定するフォームを表示したあと、ボタンをクリックした時に指定するフォームへ書き換えるものに仕上げたので備忘録。
今回はプランや講座がいくつかあって、それぞれの申込みフォームが表示されるイメージです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
★応用していくときの流れ
STEP1.ページを開いたときに指定のフォームを表示する。
↓
STEP2.ボタンをクリックしたときに、指定のフォームを表示する。
STEP1-1. htmlファイルを準備する
まずは、htmlファイル内に３つほど案内っぽいものとそれぞれにボタンを作ります。
その下には申込みフォームを表示する部分を作ります。
申込みフォームはdivタブで「id=’s-form’」にして、ひとまず作っておきます。
また、画面上部に表示した案内についてはcssで装飾しています。今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。
以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande',
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
Meiryo, メイリオ, sans-serif;
}
table{
margin: auto;
align: center;
}
table, td, th{
border:1px solid #cccccc;
}
tr th{
padding:20px;
text-align: center;
vertical-align: middle;
font-size:20px;
color:#fff;
}
th.ws1{
background-color:#5cb85c;
}
th.ws2{
background-color:#5bc0de;
}
th.ws3{
background-color:#d9534f;
}
th label{
color:#000000;
font-size:5px;
margin-left:3px;
vertical-align:top;
padding:2px;
border:1px solid #ffff00;
background-color:#ffff00;
}
tr td{
padding:20px;
text-align: middle;
vertical-align: middle;
font-size:15px;
}
.f-btn{
text-align: center;
padding:10px;
}
#s-form table{
margin: auto;
align: center;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="row">
<div class="col-md-4">
<table>
<tr><th class="ws1">ワークショップ１</th></tr>
<tr><td>小学生から参加していただけるプログラミング1日教室です。<br>
プログラミングでロボットを動かします。<br>
<tr><td>定員：10名</td></tr>
</table>
<div class="f-btn"><button type="button" class="btn btn-success">申込みフォーム</button></div>
</div>
<div class="col-md-4">
<table>
<tr><th class="ws2">ワークショップ２</th></tr>
<tr><td>中学生から参加していただけるプログラミング1日教室です。<br>
シューティングゲームを制作します。</td></tr>
<tr><td>定員：15名</td></tr>
</table>
<div class="f-btn"><button id="btn_2" type="button" class="btn btn-info">申込みフォーム</button></div>
</div>
<div class="col-md-4">
<table>
<tr><th class="ws3">ワークショップ３<label>人気！</label></th></tr>
<tr><td>高校生から参加していただけるプログラミング1日教室です。<br>
ロールプレイングゲームを制作します。</tr></td>
<tr><td>定員：10名</td></tr>
</table>
<div class="f-btn"><button id="btn_3" type="button" class="btn btn-danger">申込みフォーム</button></div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div id="s-form">
</div>
</div>
</div>
</div>
ここまでだと、以下の画像みたいになっていると思います。↓
続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. jQueryでページを開いたときに指定のフォームを表示する
まずはjQueryでページを開いたときに指定するフォームを表示してみます。
htmlの内容を書き換えるので『.html()』メソッドを使用します。
STEP1-1で作っておいたdivタブの「id=’s-form’」に表示させたいフォームへ書き換えます。
以下の内容を「sample.js」に記述します。
//ページを表示したとき指定のhtmlの内容を表示する。
$(function(){
$('#s-form').html('<table><tr><td class="l_td">参加費</td><td>3,000円(税込)</td></tr><tr><td class="l_td">参加日</td><td><input type="radio"> 20XX/XX/XX 10:00～16:00</td></tr><tr><td class="l_td">参加者</td><td>※全角で入力してください。<br>姓 <input type="text"> （例）山田<br>名 <input type="text"> （例）太郎</td></tr></table><br><div style="text-align:center;"><button type="button" class="btn btn-primary">申し込む</button></div>');
});
どうですか？
以下の画像みたいにフォームが表示されたらOKです。
※ページを開いたときにフォームが表示されていない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-2. jQueryでボタンをクリックしたときに、指定のフォームを表示する
続いて３つのボタンに動きをつけていきます。
３つのボタンは『クリック』されたときに動きをするので、『.click()』メソッドを使用します。
ここでは「指定したボタン（id）がクリックされたときに、divタブの「id=’s-form’」の部分に指定するフォームを表示する」ようにします。
STEP1-2での記述したプログラムコードの下に追記してください。以下、jsファイルの内容です。↓
//ボタンをクリック時にフォームを変更する。
$(function(){
$('#btn_1').click(function(){
$('#s-form').html('<table><tr><td class="l_td">参加費</td><td>1,000円(税込)</td></tr><tr><td class="l_td">参加日</td><td><input type="radio"> 20TT/TT/TT 9:00～12:00</td></tr><tr><td class="l_td">参加者</td><td>※全角で入力してください。<br>姓 <input type="text"> （例）山田<br>名 <input type="text"> （例）太郎</td></tr></table><br><div style="text-align:center;"><button type="button" class="btn btn-primary">申し込む</button></div>');
});
$('#btn_2').click(function(){
$('#s-form').html('<table><tr><td class="l_td">参加費</td><td>2,000円(税込)</td></tr><tr><td class="l_td">参加日</td><td><input type="radio"> 20WW/WW/WW 11:00～17:00</td></tr><tr><td class="l_td">参加者</td><td>※全角で入力してください。<br>姓 <input type="text"> （例）山田<br>名 <input type="text"> （例）太郎</td></tr></table><br><div style="text-align:center;"><button type="button" class="btn btn-primary">申し込む</button></div>');
});
$('#btn_3').click(function(){
$('#s-form').html('<table><tr><td class="l_td">参加費</td><td>3,000円(税込)</td></tr><tr><td class="l_td">参加日</td><td><input type="radio"> 20XX/XX/XX 10:00～16:00</td></tr><tr><td class="l_td">参加者</td><td>※全角で入力してください。<br>姓 <input type="text"> （例）山田<br>名 <input type="text"> （例）太郎</td></tr></table><br><div style="text-align:center;"><button type="button" class="btn btn-primary">申し込む</button></div>');
});
});
どうですか？
以下の画像みたいにボタンをクリックしたとき、フォームの内容が変わったらOKです。
※ボタンをクリックしたとき表示・非表示にならない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓
デモサイト
