FORMタグのtextareaの値を取得するときにval()で取得してajaxでPOSTしようとするとうまくいかない。これはtextareaで改行コードが入るためだ。

JQueryを使わないで通常の方法でPOSTするなら下記のようにtextareaに「wrap=”soft”」を付ければtextarea内のデータは改行コードを省いてくれるが、今回はJQueryでフォーム内の値を取得しているので下記の方法は使えない。

<textarea wrap=”soft”>ほげほげ</textarea>

というわけで改行コードを省く処理をJavaScriptで行う必要がある。探していたら見つけた。

http://www.kanaya440.com/contents/tips/javascript/002.html

function DeleteLineFeed(myLen) {
    var newLen = '';
    for(var i=0; i<myLen.length; i++){
        text = escape(myLen.substring(i, i+1));
        if(text != "%0D" && text != "%0A"){
            newLen += myLen.substring(i, i+1);
        }
    }
    return(newLen);
}

これでtextareaの値の改行コードを省いてPOSTすればよい。
解決までに結構時間かかった・・・。

因みにここまでできるとDBとの連動も楽にできるので、意外と活用方法があると思う。DBと連携する必要がない（集計やデータの更新、追加が必要ない）なら前回の記事のようにhtmlSQLとCSVファイルだけでも同じようなことが実現できる。
下記はMySQLのデータベースと連動させて簡単なアンケート・投票ブログパーツを作ってみたものだが、「答える」を押すとJQueryでPHPのスクリプトを呼び出し、DBから選択肢を集計しグラフ表示するようにしてみたものだ。

ただ、グラフも味気ない表示だとつまらないので、進捗バーのように表示されるバーを実現した。これもJQuery.ProgressBarで実現している。うーん、JQueryは本当に素晴らしい。

携帯ブラウザがJavaScriptを扱えないので、このまま携帯サイトに流用できないところが惜しいが、PCサイトでも簡単に不特定のユーザからアンケートなどを収集するのに使えるので良いと思う。こういうシステム自体を有料で提供しているところもあるようだ。うちでもやってみようか。短時間での重複クリックなどを防止する機能を付ければさらに良いかもしれない。

携帯に関して言えばフロントエンドの部分をFLASHにすればPCと同様の動きにすることも可能だろうが、この前ハマったみたいにFLASHLITE1.xでやるとなると手こずりそうだ。とりあえずは普通のHTMLで作るシンプルなものしか携帯ではできないかもしれない。

質問と選択肢、選択肢が選択された数をDBに格納しておく。
このひな形のDBさえ作っておけばあとはどの質問を表示させるかだけの話なので、スクリプトの使い回しができる。

「答える」をクリックするとDBから現在のデータを取得してバーで表示する。

テーブルは「質問の番号」「質問の内容」「選択肢１」「選択肢２」「選択肢３」「選択肢１の選択数」「選択肢２の選択数」「選択肢３の選択数」で構成した。選択肢の数を最大５程度で作っておいてもよいかもしれない。

左の画像ではわからないが、本来はウェブサイトにブログパーツとして貼り付けているが、ページ全体を読み込みしなおさないので動きがスムーズだ。
アクションの取得などはJavaScriptが行い、それ以外をPHPで処理しているので、一応Ajaxなブログパーツということになるのかな？

左の例ではバーはパーセント表示だが、もちろん数量でも表示できる。

まだまだアイデアは湧きそうだ。