jQueryで簡易アンケート
ボタンで選択するタイプの簡易アンケート
jQuery
$(function () {
$('input[type=button]').click(function() {
// 現在のID
var current_id = $(this).parent().attr('id');
// hidden生成
var input = '<input type=\"hidden\" name=\"' + current_id + '\">';
$('#answer').append(input);
$('input[name=' + current_id + ']').val($(this).attr('name'));
// 次IDを抽出
var next_number = Number(current_id.match(/[0-9]{2}/)) + 1;
// 10以下は0を付ける
if (next_number < 10) {
next_number = '0' + next_number.toString();
}
// IDを次IDに置換
var next_id = current_id.replace(/[0-9]{2}/, next_number);
// 次画面を表示
setTimeout(function(){
$('#' + current_id).fadeOut('fast', function() {
if ($('#' + next_id).is('*')) {
// 次フォーム
$('#' + next_id).addClass('selected');
} else {
// 送信
sendAnswer();
// 完了
$('#complete').addClass('selected');
}
});
},300);
});
function sendAnswer() {
// POSTを生成
var data = {};
$('input[type=hidden]').each(function(){
data[$(this).attr('name')] = $(this).val();
});
(略)
}
});
POST生成後の処理はjQuery Ajaxを参照。
HTML
<form id="q01" class="selected">
<p>1. どちらが好き？</p>
<input type="button" name="q01_1" value="犬">
<input type="button" name="q01_2" value="猫">
<input type="button" name="q01_3" value="どちらも好き">
<input type="button" name="q01_4" value="どちらも嫌い">
</form>
<form id="q02">
<p>2. どちらが好き？</p>
<input type="button" name="q02_1" value="コーヒー">
<input type="button" name="q02_2" value="紅茶">
<input type="button" name="q02_3" value="どちらも好き">
<input type="button" name="q02_4" value="どちらも嫌い">
</form>
<form id="q03">
<p>3. どちらが好き？</p>
<input type="button" name="q03_1" value="きのこの山">
<input type="button" name="q03_2" value="たけのこの里">
<input type="button" name="q03_3" value="どちらも好き">
<input type="button" name="q03_4" value="どちらも嫌い">
<span id="answer"></span>
</form>
<div id="complete">
<p>アンケートにご協力いただきありがとうございました。</p>
</div>
サンプル
アンケート結果
1000件回答が溜まっていたので試しにグラフ化してみました。たけのこがきのこ以下だと！？解せぬ...
