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件回答が溜まっていたので試しにグラフ化してみました。たけのこがきのこ以下だと!?解せぬ...

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について