Labs

<< 最初 < 前ページ 次ページ > 最後 >>
JavaScript のトピック一覧 条件クリア
icon 2016/03/31 form内データ取得
form.submit()でなく、AjaxなどでPOSTするにはform内データを取得する必要があるが、
タグ毎に処理が異なる。
(もっと合理的な書き方はあるかと思うが・・・)

サンプル


サンプル


  <form id="form">
    <h1>result(JSON)</h1>
    <div id="result"></div>

    <h1>form</h1>
    <h2>title</h2>
    <input type="text" name="title" value="">

    <h2>select</h2>
    <select name="status">
      <option value="1">select1</option>
      <option value="2">select2</option>
      <option value="3">select3</option>
      <option value="4">select4</option>
    </select>

    <h2>radio</h2>
    <input type="radio" name="active" value="true">radio1
    <input type="radio" name="active" value="false">radio2

    <h2>checkbox</h2>
    <label for="reason_1"><input id="reason_1" type="checkbox" value="1" name="reason">check1</label>
    <label for="reason_2"><input id="reason_2" type="checkbox" value="2" name="reason">check2</label>
    <label for="reason_3"><input id="reason_3" type="checkbox" value="3" name="reason">check3</label>

    <h2>textarea</h2>
    <textarea id="note" name="note" rows="10" cols="50"></textarea>

    <div>
      <a class="action-update" href="#">UPDATE</a>
    </div>
  </form>

</select>

<input type="radio" name="active" value="true">
<input type="radio" name="active" value="false">

<label for="reason_1"><input id="reason_1" type="checkbox" value="1" name="reason">選択1</label>
<label for="reason_2"><input id="reason_1" type="checkbox" value="2" name="reason">選択2</label>
<label for="reason_3"><input id="reason_1" type="checkbox" value="3" name="reason">選択3</label>

<textarea id="note" name="waste[note]" rows="10" cols=""></textarea>
</form>

input


var posts = {};
$('#form input').each(function() {
    var type = $(this).attr('type');
    var name = $(this).attr('name');
    if (name) {
        if (type == 'checkbox') {
            //TODO 重複
            posts[name] = checkValues(name);
        } else if (type == 'radio') {
            var checked = $(this).prop('checked');
            if (checked)  {
                posts[name] = $(this).val();
            }
        } else {
            posts[name] = $(this).val();
        }
    }
});

function checkValues(name) {
    var column = '[name="' + name + '"]:checked';
    var checks = [];
    $(column).each(function() {
        var checked = $(this).prop('checked');
        if (checked) {
            checks.push($(this).val());
        }
    });
    return checks;
}
厄介なのが「checkbox」でチェックボックスの状態をスキャンしないといけない。
上記サンプルは、checkboxの数だけ無駄に処理してしまっている。

inputタグ毎に明示的にid指定すれば対応は簡単だが、コーディングが冗長的
(場合によってはその方が良い?)
改善策としては、ビジネスロジックやルールをjavascript側で作るのが良さそう。

select


var posts = {};
$('#form select option:selected').each(function() {
    var name = $(this).parent().attr('name');
    if (name) posts[name] = $(this).val();
});

textarea


var posts = {};
$('#form textarea').each(function() {
    var name = $(this).attr('name');
    if (name) {
       posts[name] = $(this).val();
    }
});
icon 2015/05/13 [jQuery] DateTimePickerで日付選択
日付(カレンダー)のJSプラグインは種類はあれど時刻付きは少ない。
jQueryプラグインの「DateTimePicker」は時刻にも対応している。

jQuery Date and Time picker

サンプル


DatetimePickerサンプル

ソース


$(function() {
    var params = {format: 'Y-m-d H:i', lang: 'ja'};
    $('#from_at').datetimepicker(params);
    $('#to_at').datetimepicker(params);
});

<input type="text" id="from_at" class="input-medium" name="from_at" value="">
<input type="text" id="to_at" class="input-medium" name="to_at" value="">
icon 2014/07/16 [jQuery]jquery.cookie.jsを利用する
jquery.cookie.js」を利用して、Cookieを保存する。

保存


$.cookie('user_name', 'yoo', {expires: 30 });

取得


var user_name = $.cookie('user_name');

削除


$.cookie('user_name', null);
※「$.removeCookie」も利用できるようだが、動作しなかった(バージョンによる?)
<< 最初 < 前ページ 次ページ > 最後 >>

このサイトについて

HTML5 & CSS3化しつつあるので、現在IEには対応してません。
できれば、Google Chromeやら Apple SafariのWebKit系をお勧めします。

DBからプログラムまで一応全て自作なので、バグってたらすいません。
実験でFlash版(Flex版)を先に作りましたが、ちょっと停止してます。

プロフィール

新宿近辺でSE & プログラマーしてます。
Webアプリの開発・設計とか、最近はiPhoneとか奮闘してます。
デザインはさっぱりです。

音楽は、昔からCubase打ち込み人間で、そっちの方が経歴は長いですが、最近はやる暇がないです。。。

今は、Gon's Privates ってバンドのキーボードやってます。
単発的に、なんちゃってジャズ系のライブもやってます。

名古屋生まれなのでドラゴンズ好きです。

Info && SNS

Gmail

 yohei.yoshikawa@gmail.com

Twitter

 http://twitter.com/yoo_yoo_yoo

あんまつぶやきませんが、一応技術系メインで使ってます。情報交換はこちらへ

FaceBook

 http://www.facebook.com/#!/profile.php?id=1439130626

海外の知り合いがいないので閑散としてます。

mixi

 http://mixi.jp/show_profile.pl?id=230072

音楽仲間とかはこっちメインでやってます。興味があればこちらへ