formizeっていうjquery用のpluginを書いた

description

formにデータと突っ込んだり、データを取得するときに、$('#form').find('[name]').val()みたいなコードを毎回毎回書くのが面倒だったのでplugin化しました。

getValue(s)で取得、setValue(s)で設定できます。エラーがあった時とか入力にバインドしてごにょごにょしたいときように、getControl(s)で対象要素のjqueryオブジェクトを取得できるようにしてあります。 取得は$form.find('[name]')で取れるようにしてあり、name属性にサーバー側で受け取りたかったりロジック的に管理したい名前を振ればシームレスにデータ処理ができます。便利ぃ。

Heimdallに同梱しようと思ってた機能なんですけど、こっちのほうが汎用性たかそうだなって思ったので分離して別のpluginにしました。

examples

<form id="example">
  <input type="hidden" name="id">
  <input type="text" name="title">
  <input type="text" name="author">
  <textarea name="body" rows="4"></textarea>
  <select name="publish_state">
    <option value="publish">公開</option>
    <option value="unpublish">非公開</option>
  </select>
  <button type="submit">登録</button>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/formize.js"></script>
<script>
  $(function () {
    var $form = $('#example');
    var form = $.formize($form);

    $.getJSON('/api/memo/' + url.param('id'))
      .done(function (data) {
        form.setValues({
          id: data.id,
          title: data.title,
          author: data.author,
          body: data.body,
          publish_state: data.publish_state
        });
      });

    $form.on('click', function () {
       var data = form.getValues();
       $.post('/api/memo', data).done(function () { alert('登録したよ'); });
    });
  });
</script>

todo

• checkboxやradioのデータを取れるようにする
  • issue

repository

jquery-formize